Селектор CSS для отмеченной метки радиокниги

Question

Можно ли применить стиль css (3) к метке проверенного переключателя?

У меня есть следующий код:

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

То, что я надеялся, что

label:checked { font-weight: bold; } 

бы сделать что-то, но, увы, это не (как я ожидал).

Есть ли селектор, который может обеспечить такую ​​функциональность? Вы можете окружать divs и т. Д., Если это помогает, но лучшим решением будет тот, который использует атрибут label '' for ''.

Следует отметить, что я могу указать браузеры для моего приложения, поэтому лучше всего выбрать класс 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> 

... и он будет работать для любой структуры, с или без дивы и т.д. до тех пор, как этикетка следует вводу радио.

Пример:

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

Вы могли бы использовать немного Jquery:

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

вам нужно убедиться, что ваши проверенные радио кнопки имеют правильный класс при загрузке страницы.

Answer 3

Я знаю, что это старый вопрос, но если вы хотели бы иметь <input> быть ребенком <label> вместо того, чтобы их отдельно, вот это чистый CSS так, что вы могли бы добиться этого:

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

Тогда просто обернуть текст с <span>:

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

Посмотри на JSFiddle.

Answer 4

UPDATE:

Это работало только для меня, потому что наше существующего генерироваться HTML было дурацким, генерируя label наряду со radio с и давая им оба checked атрибута.

Ничего, и большие взлеты для Бриллианда за то, что он поднял его!

Если ваш ярлык является родным братом (как правило, это так), вы можете использовать селектор sibling и label[for=your_checkbox_id], чтобы обратиться к нему ...или дать этикетке идентификатор, если у вас есть несколько меток (например, в этом example где я использую ярлыки для кнопок)

---

пришел сюда в поисках то же самое - но в конечном итоге найти свой ответ в docs.

label элемент с checked атрибута может быть выбран следующим образом:

label[checked] { 
    ... 
} 

Я знаю, что это старый вопрос, но, возможно, это поможет кому-то там :)

Answer 5

Я забыл, где я впервые увидел его но вы можете вставлять свои ярлыки в контейнер в другом месте, если у вас есть набор атрибутов for=. Итак, давайте посмотрим образец на SO:

* { 
 
    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 DOM в header контейнер, а затем использовать дочерние/дочерние селекторы для доступа к label себя с, позволяя способность стилизовать их, когда выбраны соответствующие радио-боксы/флажки.

Мы можем не только стилизовать ярлыки, но также и стиль другого контента, который может быть потомком дочернего контейнера по отношению ко всем input. И теперь, пока вы все ждали, JSFIDDLE! Идите туда, поиграйте с ним, заставьте его работать на вас, узнайте, почему он работает, сломайте его, сделайте то, что вы делаете!

Надеюсь, что все имеет смысл и полностью отвечает на вопрос и, возможно, любые последующие действия, которые могут возникнуть.