自定义复选框checkbox样式

最新推荐文章于 2024-03-20 10:44:35 发布

原创最新推荐文章于 2024-03-20 10:44:35 发布 · 4.9w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#html #checkbox #标签 #表单

html/css 专栏收录该内容

75 篇文章

订阅专栏

本文介绍如何通过CSS美化和自定义HTML中的复选框（checkbox）样式。通常，我们无法直接修改checkbox的基本样式，但可以利用label元素和for属性来实现。通过CSS，我们可以将一个普通的div元素打造成具有复选框效果的方框，并根据选中状态应用不同的样式。文章提供了一段示例代码，展示了如何创建一个带有圆角边框的复选框，以及在选中时显示勾选标记。记得将原始的checkbox设置为隐藏，以完成自定义样式的效果。

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

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

表单元素中有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;
}

这样我们就为label 元素定义为圆角的正方形边框，然后就需要根据复选框的状态进行相应的样式调整。

#myCheck:checked + label{
    background-color: #eee;
}
#myCheck:checked + label:after{
    content:"\2714";
}

上述代码分别为label 元素定义了复选框选中状态时应具有的样式，比如背景色变灰、而且添加了“√”，\2714就是相应的编码。

这样我们就大功告成了，但是别忘了，我们要将自带的checkbox 定义为display:none; 这样就可以隐藏自带的复选框了。

效果图（不要忘记将原来的设为隐藏，这里为展示效果）：
这里写图片描述

更多参考链接：http://www.helloweba.com/view-blog-295.html

http://www.xiumu.org/technology/style-checkboxes-with-css.shtml