关于html5:css实现简单checkbox自定义样式

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'对应打勾款式。

成果如下