<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义checkbox、radio颜色</title>
<style>
label{display:block; cursor: pointer}
/*复选框基本（未选中）的样式*/
input[type="checkbox"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 4px;
background-image: url(images/icon-checked.png);
background-size: 100% auto;
box-sizing:border-box;
background-position: 0 0;
background-color: white;
border:solid 1px #333;
}
/* 复选框鼠标按下时增加的样式 */
input[type="checkbox"]:active{
background-position: 0 -48px;
background-color: #80A231;
border: 0;
}
/*复选框选中后增加的样式*/
input[type="checkbox"]:checked{
background-position: 0 -48px;
background-color: #80A231;
border: 0;
}
/*复选框选中后增加的样式*/
input[type="checkbox"]:checked:active{
background-position: 0 -48px;
background-color: #80A231;
border: 0;
}
/*单选框基本（未选中）的样式*/
input[type="radio"]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
display: block;
width: 13px;
height: 13px;
border-radius: 50%;
background-size: 100% auto;
box-sizing:border-box;
border:solid 1px #80A231;
}
/*单选按钮选中后增加的样式*/
input[type="radio"]:checked:before{
content:"";
display: block;
width: 9px;
height: 9px;
margin: 1px;
border-radius: 10px;
background-color: #80A231;
}
</style>
</head>
<body>
<form>
<div data-check="check-wrap">
<h2>自定义复选按钮颜色</h2>
<label><input type="checkbox" checked="checked">苹果</label>
<label><input type="checkbox">石榴</label>
</div>
<br>
<div class="radio-wrap">
<h2>自定义单选按钮颜色</h2>
<input type="radio" name="radio">
<input type="radio" name="radio" checked="checked">
<input type="radio" name="radio">
</div>
</form>
</body>
</html>
zdy-checkbox-radio.rar （2个子文件） 
zdy-checkbox-radio 
index.html 2KB images 
icon-checked.png 3KB资源评论
亮晶晶的芋头
- 粉丝: 19
- 资源: 2
