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

小编典典

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

html

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

阅读 553

2020-05-10

共1个答案

小编典典

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

2020-05-10