CSS -如何设置选定单选按钮标签的样式？
CSS -如何设置选定单选按钮标签的样式？
提问于 2011-01-10 05:00:17
我要向单选按钮的选定标签添加样式：
HTML：
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}你知道我做错了什么吗？
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-01-10 06:07:06
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
首先，您可能希望在单选按钮上添加name属性。否则，它们不属于同一组，并且可以选中多个单选按钮。
此外，由于我将标签作为(单选按钮的)兄弟放置，因此必须使用id和for属性将它们关联在一起。
Stack Overflow用户
发布于 2013-12-12 23:29:13
如果你真的想把复选框放在标签里面，试着添加一个额外的span标签，例如。
HTML
<div class="radio-toolbar">
<label><input type="radio" value="all" checked><span>All</span></label>
<label><input type="radio" value="false"><span>Open</span></label>
<label><input type="radio" value="true"><span>Archived</span></label>
</div>CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;
}这将为所选单选按钮的所有同级设置背景。
Stack Overflow用户
发布于 2011-01-10 05:03:24
当元素不是同级元素时，您正在使用相邻同级选择器(+)。标签是输入的父级，而不是它的同级。
CSS无法根据元素的后代(或其后的任何内容)来选择元素。
你需要依靠JavaScript来解决这个问题。
或者，重新排列您的标记：
<input id="foo"><label for="foo">…</label>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4641752
复制相关文章
相似问题