纯css3自定义复选框checkbox样式

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

Sandkin

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

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： 2015-6 文章标签：纯css3 自定义复选框自定义checkbox样式纯css3checkbox

本文链接：https://blog.youkuaiyun.com/Sandkin/article/details/46560023

2015-6 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现自定义样式的复选框。通过绝对定位和伪元素技巧，可以隐藏默认的复选框并用自定义图像替代选中状态。

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

html:部分：

css：部分

.tiaojianlist03{ position: relative; }
.tiaojianlist03 input[type=checkbox]{ position: absolute; width: 12px; height: 12px; border: 1px #dfdfdd solid; -webkit-appearance: none;}
.tiaojianlist03 input[type=checkbox]:before{ position:absolute;content: ''; width: 12px; height: 12px; top: 0px;}
.tiaojianlist03 input[type=checkbox]:checked:before {color: #007aff; background: url(../images/regisgg_03.png) no-repeat;}