input checkbox默认样式修改

最新推荐文章于 2025-03-13 15:28:55 发布

鲤余

最新推荐文章于 2025-03-13 15:28:55 发布

阅读量392

点赞数

文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/m0_47195133/article/details/131858498

版权

这段CSS代码用于创建一个自定义的复选框，包括无边框的选中状态，以及旋转45度的勾选标志，通过改变border和background属性来改变选中时的样式。

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

            input[type='checkbox'] {
                -webkit-appearance: none;
                vertical-align: middle;
                margin-top: 0;
                background: #fff;
                border: #999 solid 1px;
                border-radius: 50%;
                min-height: 12px;
                min-width: 12px;
                position: relative;
                cursor: pointer;
            }
            input[type='checkbox']:checked {
                background: #409eff;
                border: none;
            }
            input[type='checkbox']:checked::after {
                content: '';
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                position: absolute;
                background: transparent;
                border: #fff solid 1px;
                border-top: none;
                border-right: none;
                height: 4px;
                width: 8px;
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }