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

Question

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

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

我有什么想法我做错了吗？

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

Answer 2

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

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

Answer 3

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

CSS没有办法根据它的后代(也没有跟随它的任何东西)选择一个元素.

你需要寻找JavaScript来解决这个问题.

或者,重新排列标记:

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