通过CSS修改checkbox样式(利用label的for属性进行焦点传递)

需求背景：

在页面设计时，常常会用到input复选框。如果用到一些前端框架的话，一般复选框的样式都可以满足需要；但是对于未使用前端框架，直接原生的话样式可能满足不了项目需要，因此我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于checkbox伪类修改比较复杂，通常修改的方式有两种，一个是通过图片切换实现，另一个是使用纯CSS的方法进行修改。本文使用CSS对input中的checkbox进行设置。

效果图：

主要思路：

如果直接修改checkbox样式的话，实际是十分麻烦的，可以用一个巧妙的方法。利用<label>标签的for属性，把<label>和<input type=checkbox>给绑起来，直接让checkbox的display属性设为none，给<label>设置宽高等样式，当点击<label>时，同时会触发checkbox为选中状态，这是再设置<label>的背景颜色，内容符号。这样做既保留了checkbox的复选特性，又变得美观。
1.基本html片段：

<input id="check1" type="checkbox"/> <label for="check1"></label> <!--<lable>标签的for属性，绑定到input标签上-->

2.设置label样式

/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/ #check1 +label{width: 20px;height: 20px;cursor: pointer;position: absolute;border:1px solid grey; }

3.设置复选框选中时的label样式

复选框选中时其实就是点击label时

/*当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表示当前input框的值，即checked；\2714代表对号*/ #check1:checked +label::before{ display: block;content: "\2714";text-align: center;font-size: 16px;background: blue;color: white; }

4.隐藏掉原来的checkbox

#check1{display:none; }

 

总结

以上是生活随笔为你收集整理的通过CSS修改checkbox样式(利用label的for属性进行焦点传递)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。