标签：box checkbox 自定义 单选框 label gcs 20px border css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{margin:0;padding:0;box-sizing: border-box;}
/*复选框*/
.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;
box-sizing: border-box;
margin-right:10px;
}
.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: 16px;
display: inline-block;
text-align: center;
vertical-align: bottom;
border: 1px solid gray;
border-radius: 50%;
box-sizing: border-box;
margin-right:10px;
}
.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: 20px;
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="man" />
<label for="man"></label>
女<input type="radio" name="sex" class="gcs-radio" id="woman" />
<label for="woman"></label>
</div>
<hr />
</body>
</html>
标签：box,
checkbox,
自定义,
单选框,
label,
gcs,
20px,
border,
css
From： https://www.cnblogs.com/xmyfsj/p/17291796.html