从上图可以看出,不同的浏览器默认的checkbox样式差别非常的大,而且不够美观。这里我向大家推荐icheck 这款jquery插件,以实现美化效果。
icheck插件特色:
- 在不同浏览器和设备上都有相同的表现 — 包括 桌面和移动设备
- 支持触摸设备 — iOS、Android、BlackBerry、Windows Phone
- 支持键盘导航 — Tab、Spacebar、Arrow up/down 和其它快捷键
- 方便定制 — 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)
- 支持 jQuery 和 Zepto JavaScript工具库
- 体积小巧 — gzip压缩后只有1 kb
- 25 种参数 用来定制复选框(checkbox)和单选按钮(radio button)
- 8 个回调事件 用来监听输入框的状态
- 7 个方法 用来通过编程方式控制输入框的状态
- 能够将输入框的状态变化同步回原始输入框中, 支持所有选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="icheck.min.js"></script>
<link rel="stylesheet" href="polaris/polaris.css">
</head>
<body style="width: 1200px;margin: 100px auto;background: #2e3035">
<input type="radio" name="gender" />男
<input type="radio" name="gender" />女
<br><br>
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">排球
<input type="checkbox" name="hobby">乒乓球
<script>
$(function(){
$('input[type="radio"],input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris'
})
})
</script>
</body>
</html>
效果:
更多详细使用方法请参考:
http://www.bootcss.com/p/icheck/