css使用for属性美化radio控件
我们在使用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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020年02月24日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读