label { width:20px; height:20px; border:1px solid #000; display:inline-block; vertical-align:top } input { display:none; } input:checked+label { text-align:center; line-height:20px; background:red; /*这里可以加设计好的对勾图片,以背景的方式加上去 下面的伪类样式就可以不用加了*/ } input:checked+label::after { content:"\2714"; color:#fff }
默认的复选框不好看,那就自己定义一个复选框吧