css修改input checkBox复选框默认样式，css美化复选框样式

最新推荐文章于 2022-06-23 23:42:52 发布

xuanzhuan365

最新推荐文章于 2022-06-23 23:42:52 发布

阅读量797

点赞数 1

分类专栏： css样式布局文章标签： css 复选框 checkBox

原文链接：https://blog.csdn.net/qq_27717857/article/details/80684375

版权

css样式布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、原input代码

<input type="checkbox" checked="checked" />

2、css重写样式代码
注意：input里面一定要加position：relative。不然选中时对号没有效果。

input[type="checkbox"]{
    -webkit-appearance: none;
    vertical-align:middle;
    margin-top:0;
    background:#fff;
    border:#999 solid 1px;
    border-radius: 3px;
    min-height: 16px;
    min-width: 16px;
	position: relative;
	cursor: pointer;
}
input[type="checkbox"]:checked {
    background: #3190e8;
	border: none;
}
input[type=checkbox]:checked::after{
    content: '';
    top: 3px;
    left: 3px;
    position: absolute;
    background: transparent;
    border: #fff solid 2px;
    border-top: none;
    border-right: none;
    height: 6px;
    width: 10px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg);
}

（编写高质量代码，一个专业致力于页面转化，切图的前端爱好者~~）