纯css制作漂亮的复选框与单选按钮
1、首先我们写原生的html,添加几个checkbox与radio,代码如下：
<body>
<h2>复选框</h2>
<div>
语文<input type="checkbox" id="语文" class="gcs-checkbox">
<label for="语文"></label>
数学<input type="checkbox" id="数学" class="gcs-checkbox">
<label for="数学"></label>
英语<input type="checkbox" id="英语" class="gcs-checkbox">
<label for="英语"></label>
计算机<input type="checkbox" id="计算机" class="gcs-checkbox">
<label for="计算机"></label>
</div> <br />
<hr />
<h2>单选按钮</h2>
<div>
男<input type="radio" name="sex" class="gcs-radio" id="男" />
<label for="男"></label>
女<input type="radio" name="sex" class="gcs-radio" id="女" />
<label for="女"></label>
</div>
<hr />
</body>
此时没有写css样式，所以是原生的效果，效果如下：
2、下面我们开始写css样式，首先给label元素加上样式，设置背景、宽高、显示方式等等，请看代码：
.gcs-checkbox+label {
background-color: white;
border-radius: 0px;
border: 1px solid #d3d3d3;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
vertical-align: bottom;
line-height: 20px;
}
.gcs-radio+label {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
text-align: center;
vertical-align: bottom;
border: 1px solid gray;
border-radius: 50%;
}
效果如下：
3、接下来，我们需要把checkbox与radio给默认隐藏起来，因为我们是用label去模拟的，只需要加上一个属性 display: none;代码如下：
.gcs-checkbox {
display: none;
}
.gcs-radio {
display: none;
}
效果如下：
4、下面给label加上鼠标悬浮显示一个对勾的符号，主要是通过:after这个伪元素实现，如果不明白可以查阅下w3c手册，代码如下：
.gcs-checkbox+label:hover {
cursor: pointer;
border: 1px solid #2783FB;
}
.gcs-checkbox:checked+label {
background-color: #eee;
background: #2783FB;
}
.gcs-checkbox:checked+label:after {
content: "\2714";
color: white;
}
.gcs-radio+label:hover {
border: 1px solid #2783FB;
cursor: pointer;
}
.gcs-radio:checked+label {
background: #2783FB;
border: 1px solid #2783FB;
}
.gcs-radio:checked+label:after {
content: "\2022";
font-size: 35px;
color: white;
}
好了，现在已经完成了所有工作，效果如下：
5、最后，给大家贴上完整的代码，本教程完全使用css实现，没有使用一张图片， 也没有使用jquery,希望能够对您有所帮助。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*复选框*/
.gcs-checkbox {
display: none;
}
.gcs-checkbox+label {
background-color: white;
border-radius: 0px;
border: 1px solid #d3d3d3;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
vertical-align: bottom;
line-height: 20px;
}
.gcs-checkbox+label:hover {
cursor: pointer;
border: 1px solid #2783FB;
}
.gcs-checkbox:checked+label {
background-color: #eee;
background: #2783FB;
}
.gcs-checkbox:checked+label:after {
content: "\2714";
color: white;
}
/*单选按钮*/
.gcs-radio {
display: none;
}
.gcs-radio+label {
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
text-align: center;
vertical-align: bottom;
border: 1px solid gray;
border-radius: 50%;
}
.gcs-radio+label:hover {
border: 1px solid #2783FB;
cursor: pointer;
}
.gcs-radio:checked+label {
background: #2783FB;
border: 1px solid #2783FB;
}
.gcs-radio:checked+label:after {
content: "\2022";
font-size: 35px;
color: white;
}
</style>
<body>
<h2>复选框</h2>
<div>
语文<input type="checkbox" id="语文" class="gcs-checkbox">
<label for="语文"></label>
数学<input type="checkbox" id="数学" class="gcs-checkbox">
<label for="数学"></label>
英语<input type="checkbox" id="英语" class="gcs-checkbox">
<label for="英语"></label>
计算机<input type="checkbox" id="计算机" class="gcs-checkbox">
<label for="计算机"></label>
</div> <br />
<hr />
<h2>单选按钮</h2>
<div>
男<input type="radio" name="sex" class="gcs-radio" id="男" />
<label for="男"></label>
女<input type="radio" name="sex" class="gcs-radio" id="女" />
<label for="女"></label>
</div>
<hr />
</body>
</html>