如何更改单选按钮的颜色？

Question

我的意思是，单选按钮本身由一个圆形和一个位于中心的点组成（选择该按钮时）。我要更改的是两者的颜色。可以使用CSS完成吗？

Answer 1

单选按钮是特定于每个OS /浏览器的本机元素。除非您要实现自定义图像或使用包含图像的自定义Javascript库（例如，此 - 缓存链接），否则无法更改其颜色/样式。

Answer 2

一种快速的解决方法是使用来覆盖单选按钮的输入样式:after，但是创建自己的自定义工具箱可能是更好的做法。&nbsp; &nbsp; input[type='radio']:after {&nbsp; &nbsp; &nbsp; &nbsp; width: 15px;&nbsp; &nbsp; &nbsp; &nbsp; height: 15px;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 15px;&nbsp; &nbsp; &nbsp; &nbsp; top: -2px;&nbsp; &nbsp; &nbsp; &nbsp; left: -1px;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #d1d3d1;&nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; visibility: visible;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid white;&nbsp; &nbsp; }&nbsp; &nbsp; input[type='radio']:checked:after {&nbsp; &nbsp; &nbsp; &nbsp; width: 15px;&nbsp; &nbsp; &nbsp; &nbsp; height: 15px;&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 15px;&nbsp; &nbsp; &nbsp; &nbsp; top: -2px;&nbsp; &nbsp; &nbsp; &nbsp; left: -1px;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; background-color: #ffa500;&nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; visibility: visible;&nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid white;&nbsp; &nbsp; }<input type='radio' name="gender"/><input type='radio' name="gender"/>

Answer 3

仅当您针对基于Webkit的浏览器（Chrome和Safari，也许您正在开发Chrome WebApp，知道...）时，才可以使用以下代码：input[type='radio'] {&nbsp; &nbsp;-webkit-appearance: none;}然后对其进行样式设置，就好像它是一个简单的HTML元素一样，例如应用背景图像。使用input[type='radio']:active当选择输入，以提供交替的图形更新：从2018年开始，您可以添加以下内容以支持多个浏览器供应商：input[type="radio"] {&nbsp; -webkit-appearance: none;&nbsp; -moz-appearance: none;&nbsp; appearance: none;}