检查时CSS样式无线电输入

Question

我设置了以下单选按钮，以便实际广播为display:none，标签为inline-block且background-color。

我很难找到如何在选中的单选按钮上显示不同的背景颜色。

显然，我很遗憾这是一件简单的事情：

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

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

＆＃13;

＆＃13;

.background

＆＃13;

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;

}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您未正确使用doInBackground选择器。 +表示紧跟a + b之后选择任何元素b，例如：

a

通过更改HTML以使标签紧跟在单选按钮之后，我们可以使用伪选择器<a></a> <b></b> 来检测何时选中单选按钮并正确设置标签样式。

请注意，我还在标签中添加了:checked个属性，并在单选按钮上添加了for以创建两者之间的关联。

＆＃13;

＆＃13;

id

＆＃13;

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  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;
}

＆＃13;

＆＃13;

＆＃13;