重寫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>