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

我想添加一个样式到单选按钮的选定标签:

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

知道我哪里做错了吗？

365402 次浏览
小开

如果元素不是兄弟元素，则使用相邻的兄弟元素选择器(+)。标签是输入的 家长，而不是它的兄弟。

CSS 没有办法根据元素的后代选择元素(后面也没有)。

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

或者，重新排列您的标记:

<input id="foo"><label for="foo">…</label>
小开
最佳答案 

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

小开

如果您真的想将复选框放在标签中，可以尝试添加一个额外的 span 标记，例如。

超文本标示语言

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

这将为所选单选按钮的所有兄弟设置背景。

小开

您可以向您的 html 和 css 添加 span。

这是我的代码中的一个例子..。

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

由于目前还没有 CSS 解决方案来设计父类的样式，因此我在这里使用一个简单的 jQuery 解决方案来向标签添加一个类，其中包含选中的输入。

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

不要忘记给预检查输入的标签类 checkedlabel

小开

这是一个可行的解决方案

label {
position: relative;
}


label input {
position: absolute;
opacity: 0;
}


label:focus-within {
outline: 1px solid orange;
}
<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>

小开

只需使用 label:focus-within {}来设计带有选中的收音机或复选框的标签。

小开

正如 TimStieffenhofer在它们的 回答中提到的，最简单的方法是将输入字段作为标签的子字段，并在标签上使用 :focus-within伪类。

如果您想隐藏您的单选按钮，并将输入设置为隐藏或显示无，这将不再工作。 解决方法是给输入字段一个 -1的 z 索引(或任何低于父标签的 z 索引)。


提交答案