Bootstrap - 不同颜色的单选按钮

Question

使用 bootstrap 4，我设置了一个简单的是/否自定义单选按钮。

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