純CSS3美化 input 的checkbox 和 radio

magic-input

CSS3樣式複選框和單選按鈕看起來更漂亮。只有一個input元素。在線demo
源碼：https://github.com/jaywcjlove/magic-input

使用

$ npm install magic-input

你須要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。若是你使用Stylus 你就可使用 magic-input.styl 文件

<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">

Checkbox iPhone 的樣式

<input type="checkbox" class="mgc-switch mgc-sm" checked />
<input type="checkbox" class="mgc-switch"  />
<input type="checkbox" class="mgc-switch mgc-lg" checked />

Checkbox

<input type="checkbox" class="mgc" checked/> Default
<input type="checkbox" class="mgc mgc-primary" checked /> Primary
<input type="checkbox" class="mgc mgc-success" /> Success
<input type="checkbox" class="mgc mgc-info" checked /> Info
<input type="checkbox" class="mgc mgc-warning" checked /> Warning
<input type="checkbox" class="mgc mgc-danger" checked /> Danger

Radios

<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger

設置input大小的class

sm 是 small的縮寫 , lg 是 large縮寫

在 Checkbox中設置下面class

mgc-sm mgc-lg

在 Radio Button中設置下面

mgr-sm mgr-lg

改變顏色的 Class

在 Checkbox中設置下面class

mgc-primary mgc-info mgc-success mgc-warning mgc-danger

在 Radio Button中設置下面
mgr-primary mgr-info mgr-success mgr-warning mgr-danger

關注公衆號