废话不多说直接看图:复选框的选中喝未选中的
，哈哈哈，截图截的不够好，请谅解。
直接上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type=checkbox]{ /*同样，首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 20px; height: 20px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; } input[type=checkbox]:after{ content: '2714'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text-align: center; line-height: 18px; /*增加动画*/ -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; /*利用border-radius和opacity达到填充的假象，首先隐藏此元素*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0; } input[type=checkbox]:checked:after{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 1; } </style> </head> <body> <input type="checkbox" /> </body> </html>
下面直接看单选框的按钮样式：
选中和未选中的状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
form{
position:relative;
}
input[type=radio]{
/*去除浏览器默认样式*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*自定义样式*/
position: relative;
display: inline-block;
vertical-align: top;
20px;
height: 20px;
border: 1px solid #00bfff;
outline: none;
cursor: pointer;
/*设置为圆形，看起来是个单选框*/
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/**
* 单选框 选中之后的样式
**/
input[type=radio]:after{
content: '';
position: absolute;
12px;
height: 12px;
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: #00bfff;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
/*增加一些动画*/
-webkit-transition : all ease-in-out 300ms;
-moz-transition : all ease-in-out 300ms;
transition : all ease-in-out 300ms;
}
input[type=radio]:checked:after{
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
</style>
</head>
<body>
<form>
<label>
<input id="item1" type="radio" name="item" value="选项一" checked>
选项一
</label>
<label>
<input id="item2" type="radio" name="item" value="选项二" >
选项二
</label>
</form>
</body>
</html>
好了，继续去找我的项目的bug了。