自定义input单选框样式

自定义input单选框样式

表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样，如果直接对单选按钮设置样式的话，没有多少样式能够对单选按钮起作用。
为了用户体验或者需要更改单选按钮的样式可使用此方法：
一般使用单选按钮会搭配<label>元素使用并将关联起来，可以为<label>元素添加生成伪元素，并基于单选按钮的状态来为其设置样式，并将真正的按钮隐藏

1.一个基本的单选按钮

    <div>
        <input type="radio" id="girl" name="sex" />
        <label for="girl">女</label>
        <input type="radio" id="boy" name="sex" />
        <label for="boy">男</label>
    </div>

此时的样式

2.生成一个伪元素，设置自己想要的样式

    <style>
        input[type="radio"]+label::before {
            content: "\a0";/*不换行空格*/
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            width: 7px;
            height: 7px;
            margin: auto 5px;
            border-radius: 50%;
            border: 1px solid gray;
            padding: 4px;
        }
        /* 设置选中样式 */
        input[type="radio"]:checked+label::before {
            background-color: gray;
            background-clip: content-box;
            padding: 4px;
        }
    </style>

添加以上代码后的样式

3.隐藏原来的单选按钮

        input[type="radio"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

效果为：