react改变checkbox的文字类型_一个checkbox细节处理方式（checkbox与后面的文字对其）...

两点细节：

1、checkbox和文字的中线重合

2、点文字可对checkbox发生作用

动态分页

label.label-16px {

display: inline-block;

font-family: tahoma;

vertical-align: middle;

font-size: 16px;

line-height: 100%;

}

label.label-16px input {

margin: 0;

padding: 0;

outline: medium none;

}

label.label-14px {

display: inline-block;

font-family: tahoma;

vertical-align: middle;

font-size: 14px;

}

label.label-14px input {

margin: 3px 3px 0 0;

padding: 0;

outline: medium none;

display: inline-block;

float: left;

}

label.label-12px {

display: inline-block;

font-family: tahoma;

vertical-align: middle;

font-size: 12px;

}

label.label-12px input {

margin: 2px 2px 0 0;

padding: 0;

outline: medium none;

float: left;

}

描述文字默认

描述文字14px字体

描述文字12px字体

两点启示：

1、代码有些冗余，但是能保证其稳定性

2、组合可以减少代码量，应用灵活，但是在规范不健全的情况下保证自己的代码健壮，不污染别人的代码尤为重要

简易处理：

.con-label-checkbox {

font-size: 12px;

}

.label-checkbox {

vertical-align: middle;

font-family: tahoma;

font-weight: normal;

}

.label-checkbox input {

vertical-align: middle;

outline: none;

outline: 0;

margin-right: 2px;

}