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

Question

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

Answer 1

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

Answer 2

一种快速的解决方法是使用来覆盖单选按钮的输入样式: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"/>

Answer 3

仅当您针对基于Webkit的浏览器（Chrome和Safari，也许您正在开发Chrome WebApp，知道...）时，才可以使用以下代码：

input[type='radio'] {

   -webkit-appearance: none;

}

然后对其进行样式设置，就好像它是一个简单的HTML元素一样，例如应用背景图像。

使用input[type='radio']:active当选择输入，以提供交替的图形

更新：从2018年开始，您可以添加以下内容以支持多个浏览器供应商：

input[type="radio"] {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}