是否可以将css(3)样式应用于已检查单选按钮的标签?
我有以下标记:
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
我希望的是那个
label:checked { font-weight: bold; }
会做点什么,但唉不会(正如我所料)。
是否有可以实现此类功能的选择器?如果有帮助,您可以使用div等环绕,但最好的解决方案是使用标签''for''属性。
应该注意的是,我可以为我的应用程序指定浏览器,所以请最好使用css3类等。
答案 0 :(得分:319)
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>
...只要标签跟随无线电输入,它就适用于任何结构,有或没有div等。
示例:强>
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>
答案 1 :(得分:110)
我知道这是一个老问题,但如果您希望<input>
成为<label>
的孩子而不是将它们分开,那么这是一种纯粹的CSS方式,您可以完成它:
:checked + span { font-weight: bold; }
然后用<span>
包裹文本:
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
在JSFiddle上查看。
答案 2 :(得分:18)
我忘记了我第一次看到它的位置,但只要您设置了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;
}
&#13;
<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>
&#13;
呼。对于一个&#34;样本&#34;但是我觉得它确实带动了效果并指出:我们当然可以为已检查的输入控件选择一个标签而不是兄弟姐妹。秘诀在于将input
个标签保持为他们需要的内容(在这种情况下 - 只有body
元素)。
由于label
元素实际上并未使用:checked
伪选择器,因此标签存储在header
中并不重要。它确实有额外的好处,因为header
是一个兄弟元素,我们可以使用~
通用兄弟选择器从input[type=radio]:checked
DOM元素移动到header
容器然后使用后代/子选择器自己访问label
,允许在选择相应的单选框/复选框时设置样式。
我们不仅可以设置标签的样式,还可以设置其他内容,这些内容可能是兄弟容器的后代相对于所有input
的内容。现在,你们等待的那一刻,JSFIDDLE!去那里,玩它,让它为你工作,找出它的工作原理,打破它,做你做的!
希望一切都有意义并完全回答问题以及可能出现的后续问题。
答案 3 :(得分:0)
如果您的输入是label
的子元素并且您有多个标签,则可以将@Mike's trick与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上查看。
注意:同级选择器仅适用于同一父级。要解决此问题,您可以使用@Nathan Blair hack将输入隐藏在顶层。
答案 4 :(得分:-2)
你可以使用一些jQuery:
$('input:radio').click(function(){
$('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});
您还需要确保选中的单选按钮在页面加载时具有正确的类。
答案 5 :(得分:-2)
更新:
这只对我有用,因为我们现有的生成的html很古怪,生成label
和radio
s并同时赋予它们checked
属性。
没关系,并且为Brilliand提出了大胆的建议!
如果您的标签是复选框的兄弟(通常是这种情况),您可以使用~
兄弟选择器和label[for=your_checkbox_id]
来解决它...或者给标签指定标签id,如果您有多个标签(例如我在example中使用标签按钮)
来到这里寻找相同的 - 但最终在docs中找到答案。
可以选择具有label
属性的checked
元素,如下所示:
label[checked] {
...
}
我知道这是一个老问题,但也许它可以帮助那些人:)