CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。
在线demo
input
type=
"checkbox"
class=
"mgc-switch mgc-sm"
checked />
<input type="checkbox" class="mgc-switch" />
<input type="checkbox" class="mgc-switch mgc-lg" checked />
源码:https://github.com/jaywcjlove/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 的样式
![](https://i-blog.csdnimg.cn/blog_migrate/8dee860cac8955a0ac514af35cc5dadb.gif)
复选框样式:
<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
单选框样式:
<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中设置下面mgr-primary
mgr-info
mgr-success
mgr-warning
mgr-danger