المغلق محدد من أجل فحص زر الراديو تسمية

Question

هل من الممكن تطبيق css(3) أسلوب تسمية من فحص راديو الزر ؟

لدي العلامات التالية:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

كل ما أتمناه هو أن

label:checked { font-weight: bold; }

أن تفعل شيئا, ولكن للأسف لا (كما هو متوقع).

هل هناك عدد محدد يمكن تحقيق هذا النوع من وظيفة ؟ قد تحيط مع divs وما إذا كان ذلك يساعد ، ولكن أفضل حل واحد يستخدم تسمية "ل" سمة.

وتجدر الإشارة إلى أنني قادرة على تحديد المتصفحات على طلبي, حتى أفضل من فئة css3 وغيرها من فضلك.

Answer 1

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

يعمل بشكل جيد جدا على العلامات التالية:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

...وأنها سوف تعمل على أي هيكل ، مع أو بدون divs الخ طالما التسمية يلي الراديو الإدخال.

على سبيل المثال:

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

Answer 2

وأعرف أن هذا هو السؤال القديم، ولكن إذا كنت ترغب في الحصول على <input> أن يكون الطفل من <label> بدلا من جعلهم فصل، هنا هو وسيلة CSS النقية التي يمكن أن تحقيق ذلك:

:checked + span { font-weight: bold; }

وبعد ذلك فقط التفاف النص مع <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

وانظر على JSFiddle .

Answer 3

لا تنسى حيث رأيت لأول مرة ذكرت ولكن في الواقع يمكنك تضمين التسميات الخاصة بك في وعاء في مكان آخر طالما لديك for= تعيين سمة.دعونا تحقق من عينة على ذلك:

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

يا للعجب.التي كان الكثير عن "عينة" ولكن أشعر أنه حقا محركات المنزل تأثير نقطة:يمكننا بالتأكيد أن اختيار تسمية محددة تحكم الإدخال دون أن الأخوة.السر يكمن في حفظ input علامات الطفل فقط ما يجب أن يكون (في هذه الحالة - فقط body العنصر).

منذ label عنصر لا فعلا الاستفادة :checked الزائفة محدد, لا يهم التسميات يتم تخزينها في header.فإنه لا يكون لها فائدة إضافية تتمثل في أنه منذ header هو أخ العنصر يمكننا استخدام ~ عام الأخوة محدد للانتقال من input[type=radio]:checked دوم عنصر header الحاوية ومن ثم استخدام سليل/الطفل محددات الوصول إلى labels أنفسهم ، مما يتيح القدرة على نمط لهم عند كل منهما راديو صناديق/خانات اختيار.

ليس فقط يمكننا غرار التسميات, ولكن أيضا نمط المحتويات الأخرى التي قد يكون من نسل أخ حاوية بالنسبة إلى كل من inputs.والآن اللحظة التي ننتظرها جميعا ، JSFIDDLE!الذهاب إلى هناك ، ، تجعل من العمل بالنسبة لك ، ومعرفة لماذا يعمل ، وكسر ما عليك فعله!

نأمل أن جميع من المنطقي تماما يجيب على السؤال وربما أي المتابعات التي قد تطرأ.

Answer 4

إذا الإدخال هو عنصر تابع للlabel وكان لديك أكثر من تسميات، يمكنك الجمع بين <لأ href = "https://stackoverflow.com/questions/1431726/css-selector-for-a-checked -radio أزرار التسمية / 17206675 # 17206675 "> @ مايك خدعة مع Flexbox + order.

أتش تي أم أل

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

المغلق

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

وانظر على JSFiddle .

ملاحظة: الشقيق محدد يعمل فقط داخل نفس الأم. كمحاولة للتغلب على ذلك، يمكنك جعل مساهمة مخبأة في المستوى الأعلى باستخدام <لأ href = "https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label/43132408 # 43132408 "> @ ناثان بلير الإختراق.

Answer 5

هل يمكن استخدام قليلا من مسج:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

وكنت بحاجة للتأكد من أزرار الراديو المحددة الخاصة بك يكون لها الدرجة الصحيحة على تحميل الصفحة أيضا.

Answer 6

تحديث:

هذا يعمل فقط بالنسبة لي لأنه الموجودة لدينا html الذي تم إنشاؤه كان أحمق ، وتوليد labels جنبا إلى جنب مع radios و منحهم checked السمة.

لا يهم, و تقلبات كبيرة على Brilliand لإعادته!

إذا كان الخاص بك تسمية الأخوة من خانة (كما هو الحال عادة) ، يمكنك استخدام ~ الأخوة محدد ، label[for=your_checkbox_id] لمعالجة ذلك...أو إعطاء تسمية معرف إذا كان لديك عدة تسميات مثل (في هذا على سبيل المثال أين يمكنني استخدام تسميات أزرار)

---

جئت هنا أبحث عن نفسه - ولكن انتهى العثور على جوابي في مستندات.

a label عنصر مع checked السمة يمكن تحديدها كما يلي:

label[checked] {
  ...
}

أنا أعرف أنها مسألة قديمة ، ولكن ربما يساعد شخص ما هناك :)