改变radio/checkbox默认样式

最新推荐文章于 2023-09-29 08:00:00 发布

weixin_30483495

最新推荐文章于 2023-09-29 08:00:00 发布

阅读量416

点赞数

原文链接：http://www.cnblogs.com/ob99012/p/8580902.html

版权

直接上代码

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

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

checkbox同理。

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

转载于:https://www.cnblogs.com/ob99012/p/8580902.html