html自定义checkbox样式

就是将浏览器原生checkbox隐藏，对label进行相关 *** 作。因为label和checkbox时绑在一起的，所以点击label就会选中

1）将原生的checkbox隐藏

2）设置checkbox样式

.mark 是label的class，所以 ::before 就是设置label前面的样式

3）设置check选中后的样式

第一步，创建静态页面checkbox.html，并引入ionic的相关CSS文件和JS文件，如下图所示：

第二步，创建复选框容器，利用无序列表展示不同样式的复选框，代码如下：

<li class="item item-checkbox">           

<label class="checkbox">                     

<input type="checkbox" />            

</label> 松树</li>

第三步，第二步中没有添加checkbox-样式class，这里添加checkbox-assertive，代码如下：

<li class="item item-checkbox">        <label class="checkbox checkbox-assertive">              <input type="checkbox" />        </label>        梨树</li>

第四步，添加一个复选框，给定样式class为checkbox-balanced，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-balanced">               <input type="checkbox" />          </label>           柳树</li>

第五步，添加一个复选框，给定样式class为checkbox-calm，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-calm">               <input type="checkbox" />          </label>           樟树

</li>

第六步，添加一个复选框，给定样式class为checkbox-dark，代码如下：

<li class="item item-checkbox">         <label class="checkbox checkbox-dark">               <input type="checkbox" />          </label>          梧桐</li>

1、打开网页开发工具，新建一个HTML文件。

2、编写HTML：表单复选框。

3、编写CSS：复选框的样式。

4、编写CSS部分：复选框选中后的样式。

5、最好打开浏览器预览效果，满意保存即可。

注意事项

复选框提供一个制造单一选择开关的方法；它包括一个小框和一个标签。典型的复选框有一个小的“X”（或者它设置的其它类型）或是空的，这依靠项目是否被选择来决定的。

---