Question

我有这个演示http://codepen.io/anon/pen/qZjOWj我想要的是当用户在第一个单选按钮时它需要是蓝色的，当他在第二个时它需要是绿色的。有什么建议吗？

div {
  margin: 0 0 0.75em 0;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

input[type="radio"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

input[type="radio"] + label span {
  background-color: white;
  border: 1px solid black;
}

input[type="radio"]:checked + label span {
  background-color: blue;
  border: 1px solid blue;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

<div>
  <input type="radio" checked="checked" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

Answer 1

现在，在CSS中，您只需检查是否检查了任何单选按钮，并将其涂成蓝色。您需要创建一个选项，以便您可以区分radiobuttons（例如，为它们提供不同的颜色）。

类是很好的，它们非常适合这个功能。调整您的HTML，使其如下所示：

<div>
  <input type="radio" checked="checked" class="blue" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" class="green" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>

注意radiobuttons现在的类属性如何不同（所以现在你可以单独访问它们。

像这样调整你的CSS：

input[type="radio"].green:checked + label span{
     background-color:green;
     border:1px solid blue;
}

input[type="radio"].blue:checked + label span{
     background-color:blue;
     border:1px solid blue;
}

现在，您的CSS将绘制无线电按钮，其类别设置为蓝色，蓝色，以及分类为绿色，绿色的。

Answer 2

您可以通过添加课程或使用nth-child选择器等来定位第二个div。然后为圆圈应用不同的颜色。

<强> Updated Pen

div:nth-child(2) input[type="radio"]:checked + label span {
  background: green;
}

如何使用不同颜色的单选按钮？

2 个答案: