自定义复选框checkbox样式纯css+js

最新推荐文章于 2024-08-08 19:00:48 发布

艺术海洋

最新推荐文章于 2024-08-08 19:00:48 发布

阅读量8.4k

点赞数

分类专栏： js+css

本文链接：https://blog.csdn.net/baidu_20876831/article/details/80646570

版权

本文介绍了如何使用HTML、CSS和JavaScript自定义复选框的样式，包括通过设置背景图片和使用CSS3的伪元素实现。讨论了两种方法，一种依赖背景图片，具有良好的兼容性；另一种利用CSS3的`:checked`伪类和`:before`或`:after`，可能存在兼容性问题。提供了详细的代码示例和效果图。

摘要由CSDN通过智能技术生成

复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。

表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。

html:

<body>
    <input type="checkbox" id="myCheck">
    <label for="myCheck"></label>
</body>

既然是自定义，我们就要把label 伪装成复选框的样子，比较常见的是方框状，所以我们就有了如下的CSS样式。

#myCheck + label{
    background-color: white;
    border-radius: 5px;
    border:1px solid #d3d3d3;
    width:20px;
    height:20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}