啥也不说，先看效果图，再上代码：
css 自定义 checkbox 效果：未选中 | 选中
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 隐藏复选框 */
input[type='checkbox'] {
/*隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 这种简单直接的方式，是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
position: absolute;
clip: rect(0,0,0,0);
}
/* 模拟复选框 */
/* 未选中时的样式 */
input[type='checkbox']+label::before {
content: '\a0'; /*填充内容：不换行空格*/
display: inline-block;
vertical-align: 0.2em;
width: 0.8em;
height: 0.8em;
margin-right: .2em;
border-radius: .2em;
border: solid 1px #c6c6c6;
text-indent: 0.15em;
line-height: 0.65;
}
/* 选中时的样式 */
input[type='checkbox']:checked+label::before {
content: '\2713'; /*对号的 Unicode字符*/
color: black; /*对号的颜色*/
background: #5ad8ff; /*对号的背景颜色*/
}
</style>
</head>
<body>
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>
</body>
</html>
网友评论