如何自定义/更改单选按钮的默认轮廓？答案

【问题标题】：how do I customize/change the default outline of a radio button?如何自定义/更改单选按钮的默认轮廓？
【发布时间】：2018-11-22 07:00:26
【问题描述】：

我有一个客户要求将单选按钮的当前浅灰色圆形轮廓边框设置为更粗/更深的黑色。我不知道该怎么做。有什么想法吗？

 <input type="radio" value="original" name="addressInfo" id="radio_original">

【问题讨论】：

Possible Duplicate
带文字的部分是：Use address listed below<label>吗？如果是，请将其添加到您的邮政编码示例中，如果不是，您是否允许添加和/或移动 <label>？

标签： css

【解决方案1】：

input[type=radio]:checked ~ .check {
  border: 1px solid gray;

input[type=radio]:checked ~ .check::before {
  background: darkgray;

或类似的东西。

【讨论】：

这些规则不适用于 OP 发布的 HTML，因为它们没有使用相邻元素（~ 组合器的用途）

【解决方案2】：

我要求将此决定视为程式化的示例。

<input type="radio" value="original" name="addressInfo" id="radio_original">

CSS

#radio_original{
  background-color: red;
  color: red;
  display: none;
}
label{
  display: block;
  width: 20px;
  height: 20px;
  background-color: red;
  cursor: pointer;
}

#radio_original:checked+label{
  background-color: blue;
}

标签标签可以解决这个问题。

【讨论】：