CSS - 如何设置所选单选按钮标签的样式？

Question

CSS - 如何设置所选单选按钮标签的样式？

我想为单选按钮的选定标签添加样式：

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;}

我有什么想法我做错了吗？

Answer 1

.radio-toolbar&nbsp;input[type="radio"]&nbsp;{ &nbsp;&nbsp;display:&nbsp;none;}.radio-toolbar&nbsp;label&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;background-color:&nbsp;#ddd; &nbsp;&nbsp;padding:&nbsp;4px&nbsp;11px; &nbsp;&nbsp;font-family:&nbsp;Arial; &nbsp;&nbsp;font-size:&nbsp;16px; &nbsp;&nbsp;cursor:&nbsp;pointer;}.radio-toolbar&nbsp;input[type="radio"]:checked+label&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;#bbb;}<div&nbsp;class="radio-toolbar"> &nbsp;&nbsp;<input&nbsp;type="radio"&nbsp;id="radio1"&nbsp;name="radios"&nbsp;value="all"&nbsp;checked> &nbsp;&nbsp;<label&nbsp;for="radio1">All</label> &nbsp;&nbsp;<input&nbsp;type="radio"&nbsp;id="radio2"&nbsp;name="radios"&nbsp;value="false"> &nbsp;&nbsp;<label&nbsp;for="radio2">Open</label> &nbsp;&nbsp;<input&nbsp;type="radio"&nbsp;id="radio3"&nbsp;name="radios"&nbsp;value="true"> &nbsp;&nbsp;<label&nbsp;for="radio3">Archived</label></div>首先，您可能希望name在单选按钮上添加该属性。否则，它们不属于同一组，可以检查多个单选按钮。此外，由于我将标签放置为（单选按钮的）兄弟，我必须使用id和for属性将它们关联在一起。

Answer 2

如果您确实要将复选框放在标签内，请尝试添加额外的span标签，例如。HTML<div&nbsp;class="radio-toolbar"> &nbsp;<label><input&nbsp;type="radio"&nbsp;value="all"&nbsp;checked><span>All</span></label> &nbsp;<label><input&nbsp;type="radio"&nbsp;value="false"><span>Open</span></label> &nbsp;<label><input&nbsp;type="radio"&nbsp;value="true"><span>Archived</span></label></div>CSS.radio-toolbar&nbsp;input[type="radio"]:checked&nbsp;~&nbsp;*&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background:pink&nbsp;!important;}这将为所选单选按钮的所有兄弟姐妹设置背景。

Answer 3

+当元素不是兄弟元素时，您正在使用相邻的兄弟选择器（）。标签是输入的父级，而不是它的兄弟。CSS没有办法根据它的后代（也没有跟随它的任何东西）选择一个元素。你需要寻找JavaScript来解决这个问题。或者，重新排列标记：<input&nbsp;id="foo"><label&nbsp;for="foo">…</label>