我的github iSAM2016
一开始学html 标签的时候,知道有label 这个标签的,但是并没有注意到他的for 属性的作用,看一下MDN的介绍
for
可标记的 form相关元素的ID,在同一文档中作为label元素。 第一个这样的元素在文档中有一个ID匹配属性值,作为这个label元素的labeled control
例子:
Click me
我们可以借助此属性改变原有的input 样式。
样式:
input {
display: none;
}
input:checked+label::after{
margin: auto;
content: 'test';
color: red;
width:8px;
height:8px;
line-height: 8px;
text-align: center;
font-size: 12px;
}
label{
height: 10px;
width: 10px;
border:1px solid #d9d9d9;
display: -webkit-flex;
display:flex;
}
<label for="User">Click me</label>
<input type="radio" id="User" name="Name" />