label 标签的 for 属相

我的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" />