引导程序-具有不同颜色的单选按钮

Question

使用引导程序4，我设置了一个简单的yes / no自定义单选按钮。

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="rd_1" name="rd" class="custom-control-input green" value="Yes">
    <label class="custom-control-label" for="rd_1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" id="rd_2" name="rd" class="custom-control-input red" value="No">
    <label class="custom-control-label" for="rd_2">No</label>
</div>

当用户选择“是”时，我希望“是”按钮的颜色变为绿色，而当用户选择“否”时，“否”按钮的颜色变为红色。

我可以使用下面的css定义两个无线电的颜色，但是如何为每个无线电定义不同的颜色？

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #7B1FA2;
    background-color: red;
}

Answer 1

与CSS一起玩将是一个不错的实验。我关心的是可用性和用户期望。

通过更改单选按钮的感知方式，尤其是当前状态的状态，我相信我们正在破坏表单本身的有效性。

作为用户，我会担心“否” 选项具有红色突出显示。 您知道您在表单中输入的内容是什么无效吗？ 将“否” 选项设置为红色似乎不是一个有效的选择。

将“是” 选项设置为绿色将使用户似乎只能选择该选项。至少可以说，这是误导。

我强烈建议不要将两个单选按钮设置为任何特定颜色，并保持其原始状态。

---

无论如何，这是使其工作的代码。

请注意，我已经更改了标记并添加了两个不同的CSS类。

标记现在在red而不是green元素上附加了<label>和<input>两个字。

从css中，我已将背景声明从通用的一种更改为两种特定的颜色。 让我知道您是否还有其他特殊性问题。它可以固定。

.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #7B1FA2;
}

.custom-control-input:checked~.custom-control-label.red::before {
  background-color: red;
}

.custom-control-input:checked~.custom-control-label.green::before {
  background-color: green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="rd_1" name="rd" class="custom-control-input" value="Yes">
  <label class="custom-control-label green" for="rd_1">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="rd_2" name="rd" class="custom-control-input" value="No">
  <label class="custom-control-label red" for="rd_2">No</label>
</div>