html放个input就好<input type="checkbox" />
款式是less的,能够本人转下css
@act-color:#FFBA01;
input[type=checkbox] {
width: 16px;
height: 16px;
vertical-align: sub;
overflow: visible;
visibility: hidden;
&:after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid rgba(153,153,153,0.9);
visibility: visible;
color:@act-color;
line-height: 1;
font-size:16px;
text-align: center;
cursor:pointer;
}
&:hover:after{
border-color:@act-color;
}
&:checked::after{
content: '\2714';
}
}
很简略,input外面放个after伪元素,代替本来的checkbox。
原checkbox用visibility: hidden;暗藏掉。
选中款式对应after的content: ‘\2714’
‘\2714’对应打勾款式。
成果如下