CSS-селектор для метки отмеченного переключателя
Вопрос
Можно ли применить стиль css (3) к метке отмеченного переключателя?
У меня есть следующая разметка:
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
На что я надеялся, так это на то, что
label:checked { font-weight: bold; }
хотел бы что-то сделать, но, увы, это не так (как я ожидал).
Существует ли селектор, который может обеспечить такую функциональность?Вы можете окружить divs и т.д., если это поможет, но лучшим решением было бы то, которое использует атрибут label "for".
Следует отметить, что я могу указать браузеры для своего приложения, поэтому, пожалуйста, лучший в своем классе css3 и т.д.
Решение
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>
Другие советы
Я знаю, что это старый вопрос, но если вы хотели бы получить <input>
быть ребенком <label>
вместо того, чтобы разделять их, вот чистый CSS-способ, которым вы могли бы это сделать:
:checked + span { font-weight: bold; }
Затем просто оберните текст символом <span>
:
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
Смотрите это на JSFiddle.
Я забыл, где я впервые увидел это упоминание, но на самом деле вы можете вставлять свои этикетки в контейнер в другом месте, если у вас есть 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
s.А теперь, в тот момент, которого вы все так долго ждали, JSFIDDLE!Идите туда, поиграйте с этим, заставьте это работать на вас, выясните, почему это работает, сломайте это, делайте то, что вы делаете!
Надеюсь, что все это имеет смысл и полностью отвечает на вопрос и, возможно, на любые последующие действия, которые могут возникнуть.
Если ваш ввод является дочерним элементом label
и у вас есть более одной этикетки, вы можете комбинировать Трюк @Майка с Flexbox
+ order
.
<label class="switchLabel">
<input type="checkbox" class="switch"/>
<span class="left">Left</span>
<span class="right">Right</span>
</label>
css
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.
примечание:Селектор родственных связей работает только внутри одного родительского элемента.Чтобы обойти это, вы можете сделать ввод скрытым на верхнем уровне, используя @Натан Блэр взломать.
Вам могло бы пригодиться немного jQuery:
$('input:radio').click(function(){
$('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});
Вам также нужно будет убедиться, что ваши отмеченные переключатели имеют правильный класс при загрузке страницы.
Обновить:
Это сработало только для меня, потому что наш существующий сгенерированный html был дурацким, генерирующим label
ы вместе с radio
ы и даю им обоим checked
атрибут.
Не бери в голову, и большое спасибо Brilliand за то, что подняла этот вопрос!
Если ваша метка является братом флажка (что обычно имеет место), вы можете использовать ~
селектор родственных связей и label[for=your_checkbox_id]
чтобы решить эту проблему...или дайте метке идентификатор, если у вас есть несколько меток (как в этом пример где я использую ярлыки для кнопок)
Пришел сюда в поисках того же самого - но в итоге нашел свой ответ в Документы.
a label
элемент с checked
атрибут может быть выбран следующим образом:
label[checked] {
...
}
Я знаю, что это старый вопрос, но, возможно, это кому-то там поможет :)