css - 如何设置不同颜色的单选按钮样式？

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>

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

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

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

Answer 1

这将是一个很好的 实验 来玩弄 css。我关心的是可用性和用户期望。

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

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

将“yes” 选项设为绿色会使它看起来像是用户可以选择的唯一有效选项。这至少可以说是误导。

我强烈建议不要将两个单选按钮设为任何特定颜色并保持浏览器的原生颜色。

---

无论如何，这是让它工作的代码。

请注意，我更改了标记并添加了两个不同的 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>