改变单选radio样式

偏执的太偏执、 2021-09-10 07:02 478阅读 0赞

首先隐藏radio原有样式

.checkbox-group input[type=radio] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

给外层label加上定位position:relative;

.checkbox-container{
        position: relative;
        min-width: 180px;
        margin: 0 8px 8px 0;
        padding-left: 20px;
        font-size: 12px;
        cursor: pointer;
    }

再给里层input加上绝对定位position:absolute;

.checkbox-container input[type=radio] {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

fa调用font-awesome字体图标库css  
加上样式

.checkbox-container .fa {
        font-size: 12px;
        -webkit-transform: scale(.66);
        transform: scale(.66);
        position: absolute;
        left: 0;
        top: -1px;
        color: #fff;
        padding: 2px;
        background: #fff;
        border: 1px solid #d8d8d8;
    }

加上选中的样式

.checkbox-group input[type=radio]:checked+.fa {
        border: 1px solid #44a8f2;
        background: #44a8f2;
    }

最后效果：

![6587214-1e44240d18ee3d57.png][]

TIM图片20180711173631.png

改变多选CheckBox样式原理一样，把radio改为checkbox即可

[6587214-1e44240d18ee3d57.png]: /images/20210804/aeab7c6c01d14640bed064186d903d85.png