input checkbox默认样式修改

最新推荐文章于 2024-02-22 11:08:52 发布

大鲤余

最新推荐文章于 2024-02-22 11:08:52 发布

阅读量314

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/m0_47195133/article/details/131858498

版权

            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);
            }