重写weui checkbox radio样式

按照网上推荐作法,重写了weui样式, 最好是覆盖重写,而不是直接修改它的原代码方式.  重写了 weui的 checkbox 与 radio 样式.

先来张效果图:

 

在企业内部常常须要开发一些小的表单应用, 可是weui的 radio/checkbox两个控样式总以为不适合,典经的radio/checkbox样式.

因此花了点时间重写了一下这两个控件的样式.

 

这两个控件的样式,采用字体方式来实现的, 因此 咱们能够 从 https://www.iconfont.cn/  阿里的这个网站挑选本身喜欢的字体图标..

 如下是两个控件 未选 与 选中 时的样式.

 

 <style> @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype');
        }


         
        /* radio-未选中效果 */ .weui-cells_radio .weui-icon-checked:before { font-family: "iconfont" !important; content: '\e731'; color: #C9C9C9; font-size: 23px;
        }

        /* radio-选中效果 */ .weui-cells_radio .weui-check:checked + .weui-icon-checked:before { font-family: "iconfont" !important; display: block; content: '\e62e'; color: #09BB07; font-size: 23px;
        } 

        /* checkbox-未选中效果 */ .weui-cells_checkbox .weui-icon-checked:before { font-family: "iconfont" !important; content: '\E658'; color: #C9C9C9; font-size: 23px;
        }
        /* checkbox-选中效果 */ .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before { font-family: "iconfont" !important; content: '\e623'; color: #09BB07;
        } </style>