您可以使用css中的重音颜色属性来更改复选框和单选按钮的背景颜色。

input[type=radio] {
  accent-color: red;
}

这对我很有效，

简单添加css属性:

输入(type = "电台"]{强调色:红色;}

这里是资源链接

对于我的使用，我想做的只是改变颜色，没有其他，所以我已经从@klewis的答案，并将其更改为…

使收音机与浏览器默认(在我的情况下是Chrome)相同，使用相对%和em而不是固定的px。注意:em基于输入[type=radio]的字体大小，这可以被继承。可能需要对下面的值进行调整。 保留原始单选按钮的辅助功能(如聚焦时的轮廓)，不使用display: none;并将:before和:after应用于原收音机而不是标签。

/* make default radio 'invisible' */ input[type=radio] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* make new radio outer circle */ input[type=radio]:before { content: " "; display: inline-block; position: relative; width: 0.8em; height: 0.8em; border-radius: 50%; border: 1px solid grey; background-color: transparent; } /* change colour of radio outer circle when checked */ input[type=radio]:checked:before { border-color: green; } /* make new radio inner circle when checked */ input[type=radio]:checked:after { content: " "; display: block; position: absolute; width: 0.55em; height: 0.55em; border-radius: 50%; top: 0.4em; left: 0.13em; background: green; }

`

一个快速的解决方法是使用:after覆盖单选按钮输入样式，但是创建自己的自定义工具包可能是一个更好的实践。

input[type='radio']:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #d1d3d1; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } input[type='radio']:checked:after { width: 15px; height: 15px; border-radius: 15px; top: -2px; left: -1px; position: relative; background-color: #ffa500; content: ''; display: inline-block; visibility: visible; border: 2px solid white; } <input type='radio' name="gender"/> <input type='radio' name="gender"/>

试试这样做:

#yes{ border:2px solid white; box-shadow:0 0 0 1px #392; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #yes:checked{ background-color:#392; } #no{ border:2px solid white; box-shadow:0 0 0 1px #932; appearance:none; border-radius:50%; width:12px; height:12px; background-color:#fff; transition:all ease-in 0.2s; } #no:checked{ background-color:#932; } <input id="yes" type="radio" name="s"><label for="yes">Yes</label></br> <input id="no" type="radio" name="s"><label for="no">No</label>

有更少的代码，它看起来更好，你不需要玩:之前，:之后和位置达到效果。

将单选按钮绑定到样式标签可能会有所帮助。进一步的细节在这个回答中。