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