自定义复选框checkbox样式

最新推荐文章于 2024-01-02 16:06:35 发布

小花橙色

最新推荐文章于 2024-01-02 16:06:35 发布

阅读量279

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43682817/article/details/84034704

本文介绍如何使用CSS对复选框进行美化，通过HTML和CSS的结合，实现自定义复选框的样式，包括选中状态的背景色、图标等，同时提供了隐藏原生复选框的方法，并分享了相关参考资料。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

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

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

html:

<body>    <input type="checkbox" id="myCheck">    <label for="myCheck"></label></body>
  1
2
3
4

既然是自定义，我们就要把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;}
  1
2
3
4
5
6
7
8
9
10
11

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

#myCheck:checked + label{    background-color: #eee;}#myCheck:checked + label:after{    content:"\2714";}
  1
2
3
4
5
6

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

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

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

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

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

给我老师的人工智能教程打call！http://blog.youkuaiyun.com/jiangjunshow