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

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

HTML:

---

知道我做错了什么吗

当元素不是同级元素时，您正在使用相邻同级选择器+。标签是输入的父级，而不是同级

CSS无法根据元素的子代或其后的任何内容来选择元素

您需要使用JavaScript来解决这个问题

或者，重新排列标记：

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

.收音机工具栏输入[类型=收音机]{ 显示：无； } .收音机工具栏标签{ 显示：内联块； 背景色：ddd； 填充：4px11px； 字体系列：Arial； 字体大小：16px； 光标：指针； } .收音机工具栏输入[类型=收音机]：选中+标签{ 背景色：bbb； } 全部的 打开 存档

---

如果您确实想将复选框放在标签内，请尝试添加一个额外的span标记，例如

HTML

---

这将为所选单选按钮的所有同级设置背景。

您可以在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解决方案来设置父项的样式，所以我在这里使用一个简单的jQuery将一个类添加到标签中，其中包含选中的输入

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

---

别忘了给预检查输入的标签也加上类checkedlabel

标签{ 位置：相对位置； } 标签输入{ 位置：绝对位置； 不透明度：0； } 标签：关注内部{ 轮廓：1px实心橙色； } 全部的 打开 存档

---

@约翰：那是真的。IE8没有实现：checked选择器。如果我希望既不选择输入[type=radio]也不选择输入[type=checkbox]。这是正确的语法，只需一条规则就可以做到这一点，并且避免这样做：input[type=radio]，input[type=checkbox]@fabregas88您可以向这些元素添加CSS类，然后.foo{…}您刚刚终止了键盘访问！希望您所有的用户都身体健康。。。现在，如果您只保留单选按钮，而不使用display:none；然后浏览器将使其与键盘配合良好。@gcb问题是如何隐藏标准单选按钮。我做了这个原型。单选按钮绝对位于标签后面。虽然可能不是最好的方法，但我更喜欢这种方法，尽管我使用了不同的选择器“+”，如下所述，并且我只想为所选项目设置样式。这使我不必担心for属性。

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important;
}

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

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

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});