CSS - 如何样式选定的单选按钮标签？

我想要的样式添加到一个单选按钮的选择标签：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; 
}

任何想法我做错了吗？

来源

2011-01-09 AnApprentice

224

.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属性将它们关联在一起。

来源

2011-01-09 22:07:05

@Steve是啊，我知道，世界是残酷的......'：P' –

似乎在IE8中没有工作。 – Johncl

@Johncl的确如此。 IE8不执行'：checked'选择器。 –

当元素不是同级时，您正在使用临近的同级选择器（+）。标签是父母的输入，而不是兄弟姐妹。

CSS没有办法根据它的后代（或其后的任何东西）选择一个元素。

你需要看看JavaScript来解决这个问题。

或者，重新安排你的标记：

<input id="foo"><label for="foo">…</label>

来源

2011-01-09 21:03:23 Quentin

如果您确实想将复选框放在标签内，请尝试添加额外的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; 
}

，将设置的背景选定的单选按钮的所有兄弟姐妹。

来源

2013-12-12 15:29:12 iainbeeston

我更喜欢这种方法，虽然我使用了不同的选择器（'+'如下所述和[在此问题中]（http://stackoverflow.com/q/14592768/957950），因为我想要只需要选择项目就可以了，这让我不用担心'for'属性。 – brichins

您可以添加跨度到您的HTML和CSS。

下面是我的代码示例...

HTML（JSX）：

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/> 
<label for="radiostyle1"><span></span> am </label> 

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/> 
<label for="radiostyle2"><span></span> pm </label>

CSS使标准单选按钮消失在屏幕上叠加的自定义按钮图像：

input[type="radio"] { 
    opacity:0;          
} 

input[type="radio"] + label { 
    font-size:1em; 
    text-transform: uppercase; 
    color: white ; 
    cursor: pointer; 
    margin:auto 15px auto auto;      
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:30px; 
    height:10px; 
    margin:1px 0px 0 -30px;      
    cursor:pointer; 
    border-radius: 20%; 
} 


input[type="radio"] + label span { 
    background-color: #FFFFFF 
} 


input[type="radio"]:checked + label span{ 
    background-color: #660006; 
}

来源

2017-06-15 02:20:29

CSS - 如何样式选定的单选按钮标签？

回答

相关问题