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

小编典典

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

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

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

有什么想法我做错了吗？

阅读 730

2020-05-10

共1个答案

小编典典

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

2020-05-10