html - 选中时的 CSS 样式单选输入

Question

我已经设置了以下单选按钮的样式，因此实际的单选按钮是 display:none 并且标签是一个带有 background-color< 的 inline-block/.

我正在努力寻找如何在选中的单选按钮上显示不同的背景颜色。

显然这是我遗漏的一件简单的事情:

input[type="radio"] {
  display: none;
}
label + checked {
  background-color: #ffcb00;
  display: inline-block;
  width: 8vw;
  height: 4vw;
  line-height: 4vw;
  border-radius: 0.5vw;
}
label {
  background-color: #f2f2f2;
  display: inline-block;
  width: 8vw;
  height: 4vw;
  line-height: 4vw;
  border-radius: 0.5vw;
}

<label>
  <input type="radio" name="amount" value="100" checked />
  <b>&#163;100</b>
</label>
<label>
  <input type="radio" name="amount" value="250" />
  <b>&#163;250</b>
</label>
<label>
  <input type="radio" name="amount" value="500" />
  <b>&#163;500</b>
</label>
<label>
  <input type="radio" name="amount" value="1000" />
  <b>&#163;1,000</b>
</label>
<label>
  <input type="radio" name="amount" value="1500" />
  <b>&#163;1,500</b>
</label>

<br>

<br>

<label>
  <input type="radio" name="term" value="30" checked />
  <b>30 days</b>
</label>
<label>
  <input type="radio" name="term" value="60" />
  <b>60 days</b>
</label>
<label>
  <input type="radio" name="term" value="90" />
  <b>90 days</b>
</label>
<label>
  <input type="radio" name="term" value="180" />
  <b>180 days</b>
</label>
<label>
  <input type="radio" name="term" value="360" />
  <b>360 days</b>
</label>

Answer 1

由于 label 是 input[type="checkbox"] 的父级，因此您无法在 CSS 中直接选择它。解决此问题的一种选择如下。将额外的 div 添加到 label(在我的示例中为 .background)并使用它来更改背景颜色。当然，还有更多选项可以解决此问题，但这可能是最简单的一个。

input[type="radio"] {
  display: none;
}

.background{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  width: auto;
  height: auto;
  
  background-color: #f2f2f2;
}

input[type="radio"]:checked + .background{
  background-color: #ffcb00;  
}

label {
  position: relative;
  display: inline-block;
  width: 8vw;
  height: 4vw;
  line-height: 4vw;
  border-radius: 0.5vw;
}

label *{
  
  position: relative;

}

<label>
  <input type="radio" name="term" value="30"  />
  <div class="background"></div>
  <b>30 days</b>
</label>

<label>
  <input type="radio" name="term" value="30" checked />
  <div class="background"></div>
  <b>30 days</b>
</label>