Magic-InputCSS3 复选和单选样式工具
CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo
源码:https://github.com/dcsite/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
评论
Scrollbar.app滚动条样式生成工具
Scrollbar.app是一个简单的网络应用程序,可帮助开发人员设计和实现自定义的滚动条。项目设置npminstall编译和热重载npmrundev
Scrollbar.app滚动条样式生成工具
0
icheck自定义复选框和单选按钮
iCheck是一套基于 jQuery 的自定义复选框和单选按钮,以避免在日常开发中重复造轮子。在数量庞大的浏览器,设备和它们的不同版本中,它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定
icheck自定义复选框和单选按钮
0
QR Designer二维码样式自定义工具
QRDesigner是用于对二维码样式进行个性化自定义的开源库。该库仅支持对二维码的中间部分进行自定义设计,它没有使用二维码的纠错功能,只是打开/关闭某些像素,不影响二维码码所指向的内容。使用示例
QR Designer二维码样式自定义工具
0