java中jlaber用法_laber的for属性

laber的for属性的作用：通过for属性，可以实现通过点击label标签来达到相当于点击input的作用。

常用于：美化input标签

例子：

html:

前端工程师

后端工程师

全栈工程师

css:

.radio-beauty-container {

font-size: 0;

$bgc: green;

%common {

padding: 2px;

background-color: $bgc;

background-clip: content-box; //裁剪的是label标签不包含padding的部分

position: relative;

top: 0px;

}

.radio-name {

vertical-align: middle;

font-size: 16px;

}

.radio-beauty {

width: 18px;

height: 18px;

box-sizing: border-box;

display: inline-block;

border: 1px solid $bgc;

vertical-align: middle;

margin: 0 15px 0 3px;

border-radius: 50%;

&:hover {

box-shadow: 0 0 7px $bgc;

@extend %common;

}

}

input[type="radio"]:checked+.radio-beauty {

@extend %common;

}

}

效果图：

微信图片_20180420111905.png