freewind-demos/html-css-custom-checkbox-demo

Html Css Custom Checkbox Demo

Checkbox的styling不太容易，有几个地方需要注意：

1. 默认的复选框的样式是由浏览器提供的，基本上不能为它设置样式。 比如框的大小没法用px指定，使用transform: scale(2)或者zoom: 2来放大，要么效果不好有毛边，要么有的浏览器不支持。

2. 如果想对复选框进行设置，需要先隐藏浏览器自带的效果，使用appearance:none。

   • 但是appearance现在浏览器不认，必须在前面加前缀，比如-webkit-appearance/-moz-appearance等
   • appearance:none之后，就可以使用通常的style来修饰，比如width/height/border等

3. 需要自定义的勾选效果，可以使用background-image

4. label与input结合之后，会遇到复选框与文字对齐的问题（文字通常会偏下），这时需要比较复杂的方式（比如position/display/vertical-align/padding等结合）才能调整好。

5. 对checkbox使用all: initial来重置其样式后，会发现复选框不显示，原因是appearance被重置后，会丢失原始的checkbox样式。所以需要手动指定：

   input[type=checkbox] {
     all: initial;
     -webkit-appearance: checkbox;
     -moz-appearance: checkbox;
     appearance: checkbox;
   }
   

open index.html