我们在使用radio,checkbox等控件的时候,需要对原有的样式进行美化,但是此类控件美化程度有限。
所以就出来了for属性,需要配置lable标签使用。
for 属性规定 label与哪个表单元素绑定,作用是 在点击label时会自动将焦点移动到绑定的元素上。
经常使用在radio和checkbox等input元素上。
<input type="radio" name="name" id="radio4" /><label for="radio4">男</label>
上述代码就把input和lable绑定起来了,for属性对应的是input的id值。
这样我们在点击label的时候,radio就会选中。
下图是我使用for属性和css相邻选择器美化了radio选择框:
代码如下(可直接复制运行):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://www.sammh.com/css/reset.css" rel="stylesheet" />
<style>
ul {
margin-left: 200px;
margin-top: 200px;
}
ul li{
display:inline-block;
margin-left:20px;
}
label {
margin-right: 5px;
border: 1px solid #4C70B1;
border-radius: 100%;
width: 20px;
height: 20px;
cursor: pointer;
transition: ease 300ms;
display:inline-block;
}
label:hover {
border-color: #ccc;
background-color: #4C70B1;
box-shadow: 0 0 7px #ccc;
}
input[type=radio]:checked+label{
background-color: #4C70B1;
}
</style>
</head>
<body>
<ul>
<li>
<input type="radio" name="name" id="radio1" value="14" hidden /><label for="radio1"></label><span>男</span>
</li>
<li>
<input type="radio" name="name" id="radio2" value="15" hidden /><label for="radio2"></label><span>女</span>
</li>
<li>
<input type="radio" name="name" id="radio3" value="16" hidden /><label for="radio3"></label><span>人妖</span>
</li>
</ul>
</body>
</html>