css自定义checkBox的样式

最新推荐文章于 2024-04-02 11:10:24 发布

灯塔水电工

最新推荐文章于 2024-04-02 11:10:24 发布

阅读量518

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/jdhrucn/article/details/135342352

版权

1.最近在写项目的时候碰到要对checkbox的复选框的样式进行修改。项目没有用任何框架，要求我们用原生的css。

2.我搜了一下发现，用css来直接处理input标签只能进行简单的设置，比如改变框的大小。像那些背景颜色之类的是改变不了的。这就需要我们换个思路了，我们可以自己用容器自己写一个复选框样式，然后和checkbox进行脚本的绑定。这里的容器我们可以使用label标签，在用label的for属性和checkbox进行绑定。在把一开始的checkbox给隐藏起来，就可以实现自定义checkbox。

3.参考代码：

初始的checkbox

<div>
     <input type="checkbox">
     <span>篮球<span>
</div>

<div>
     <input type="checkbox">
     <span>足球<span>
</div>

<div>
     <input type="checkbox">
     <span>羽毛球<span>
</div>

自定义之后的checkbox:

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .checkDiv{
            display: flex;
            align-items: center;
        }


        input[type='checkbox']{
            display: none;
        }

        input[type='checkbox']+label{
            border: 1px solid red;
        }

        input[type='checkbox']:checked+label{
            border: 1px solid red;
            background-color: aqua;
        }

        .checkbox{
            width: 12px;
            height: 12px;
            margin-right: 10px;
        }

    </style>
</head>
<body>
    <div class="checkDiv">
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1" class="checkbox"></label>
        <span>篮球<span>
    </div>
    <div class="checkDiv">
        <input type="checkbox" id="checkbox2">
        <label for="checkbox2" class="checkbox"></label>
        <span>足球<span>
    </div>
    <div class="checkDiv">
        <input type="checkbox" id="checkbox3">
        <label for="checkbox3" class="checkbox"></label>
        <span>羽毛球<span>
    </div>
</body>
</html>

想要什么样的样式，可以修改对应的css代码。

觉得不错的小伙伴，帮忙点个赞呗！

灯塔水电工

关注

9
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css自定义checkBox的样式

2.我搜了一下发现，用css来直接处理input标签只能进行简单的设置，比如改变框的大小。像那些背景颜色之类的是改变不了的。这就需要我们换个思路了，我们可以自己用容器自己写一个复选框样式，然后和checkbox进行脚本的绑定。这里的容器我们可以使用label标签，在用label的for属性和checkbox进行绑定。在把一开始的checkbox给隐藏起来，就可以实现自定义checkbox。1.最近在写项目的时候碰到要对checkbox的复选框的样式进行修改。想要什么样的样式，可以修改对应的css代码。
复制链接

扫一扫