checkbox和radio作为网页比较常用的HTML组件,默认样式是无法更改的.但在网页美化中,时常需要更改其样式.
此方法对checkbox、radio等都适用,下面以复选框checkbox为例.
将置于复选框之后的label标签的for属性,设置为复选框的id.这样label标签就和复选框产生关联,点击label标签时,对应的复选框同样接收到数据.
html代码如下:(checkbox的id值可以设置成任意值,只要将label标签的for值设置成相同的值即可)
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<label for="checkbox-1-1"></label>
</body>
</html>将复选框隐藏,然后将label标签设置成我们想要的样子.
.regular-checkbox {
display: none;
}.regular-checkbox + label {
border: 1px solid #cacece;
background-color: #fafafa;
padding: 7px;
display: inline-block;
border-radius: 3px;
position: relative;
margin-right: 5px;
cursor: pointer;
}之后,设置点击复选框时,label标签样式变成我们想要的样子,实现网页美化.
这里,我们给标签一个背景色,同时添加一个√("\2714")
.regular-checkbox:checked + label {
background-color: #ff8400;
}.regular-checkbox:checked + label:after {
content: "\2714";
color: white;
height: 16px;
width: 16px;
line-height: 14px;
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
margin-left: 2px;
}这样,就简单了实现了复选框样式的更改.