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

最新推荐文章于 2022-07-11 16:57:54 发布

原创最新推荐文章于 2022-07-11 16:57:54 发布 · 3.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #label #css

基础知识专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS而非图片切换来美化复选框的方法。通过将复选框的display属性设为none，并利用label标签与其绑定，可以自定义复选框的样式，使其更加美观且保持复选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景：

在页面设计时，常常会用到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