共计 575 个字符，预计需要花费 2 分钟才能阅读完成。
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’ 对应打勾款式。
成果如下
正文完
