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

CSS - How to Style a Selected Radio Buttons Label?

提问by AnApprentice

I want to add a style to a radio button's selected label:

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

HTML:

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

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

Any ideas what I'm doing wrong?

任何想法我做错了什么？

回答by ?ime Vidas

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

First of all, you probably want to add the nameattribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.

首先，您可能希望name在单选按钮上添加属性。否则，它们不属于同一组，并且可以选中多个单选按钮。

Also, since I placed the labels as siblings (of the radio buttons), I had to use the idand forattributes to associate them together.

此外，由于我将标签作为（单选按钮的）兄弟标签放置，我必须使用id和for属性将它们关联在一起。

回答by iainbeeston

If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.

如果您真的想将复选框放在标签内，请尝试添加额外的 span 标签，例如。

HTML

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

CSS

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

That will set the backgrounds for all siblings of the selected radio button.

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

回答by Quentin

You are using an adjacent sibling selector (+) when the elements are not siblings. The label is the parentof the input, not it's sibling.

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

CSS has no way to select an element based on it's descendents (nor anything that follows it).

CSS 无法根据它的后代（也没有任何跟随它的元素）来选择一个元素。

You'll need to look to JavaScript to solve this.

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

Alternatively, rearrange your markup:

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

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

回答by Praveena Janakiraman

You can add a span to your html and css .

您可以在 html 和 css 中添加跨度。

Here's an example from my code ...

这是我的代码中的一个示例...

HTML ( JSX ):

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 to make standard radio button vanish on screen and superimpose custom button image:

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

回答by Fanky

As there is currently no CSS solution to style a parent, I use a simple jQuery one here to add a class to a label with checked input inside it.

由于目前没有 CSS 解决方案来设置父项的样式，我在这里使用一个简单的 jQuery 来将一个类添加到其中包含已检查输入的标签中。

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

Don't forget to give the pre-checked input's label the class checkedlabeltoo

不要忘了给前检查输入的标签类checkedlabel太

回答by WofWca

Here's an accessible solution

这是一个可访问的解决方案

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>