html checkBox自定义格式修改

最新推荐文章于 2023-10-04 10:06:34 发布

原创最新推荐文章于 2023-10-04 10:06:34 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请务必附上文章网址，谢谢。

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用CSS自定义复选框的外观，包括去除默认样式、设置背景图片和颜色，实现选中状态的视觉效果。

css代码

 input[type=checkbox]{
            appearance: none;
            -moz-appearance: none;
            -ms-progress-appearance: none;
            -webkit-appearance: none;
            outline: none;
            display: inline-block;
            width: 16px ;
            height: 16px ;
        }

input[type=checkbox]:checked{
            background: url("/images/login/checked@1x.png") no-repeat;     //替换图片
            background-position: center center;                            //图片位置
            background-size: contain;                                      //图片大小
            background-color: #2877ff;
        }