改变radio/checkbox样式

Posted ob99012

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了改变radio/checkbox样式相关的知识,希望对你有一定的参考价值。

直接上代码

.item input[type="radio" ] {
        width: 20px;
        height: 20px;
        background: #fff;
        -webkit-appearance: none;
        border: 1px solid #999;
    }
    
    .item input[type="radio" ]:checked {
        background:url("../img/select.png");
        background-size: cover;
    }

 得到的结果就是radio的样式由圆形改为了正方形,被选中打勾。

checkbox同理。

起重要作用的就是-webkit-appearance: none,默认样式清除,然后就可以自己需要设置了。

以上是关于改变radio/checkbox样式的主要内容,如果未能解决你的问题,请参考以下文章

radio checkbox 修改默认样式

select,radio,checkbox的美化

:radio :checkbox

怎么让bootstrap的radio选中

miniuijs拼接html没样式

微信小程序 - radio/checkbox自定义组件