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

Question

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

原文由 catandmouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

单选按钮是特定于每个操作系统/浏览器的本机元素。没有办法改变它的颜色/样式，除非你想实现自定义图像或使用包含图像的自定义 Javascript 库（例如 这个- 缓存链接）

原文由 Fred 发布，翻译遵循 CC BY-SA 3.0 许可协议

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"/>

原文由 Jamie 发布，翻译遵循 CC BY-SA 3.0 许可协议