css input checkbox样式更改

最新推荐文章于 2024-05-11 09:45:45 发布

_Lunay

最新推荐文章于 2024-05-11 09:45:45 发布

阅读量328

点赞数

分类专栏： CSS

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用CSS自定义HTML复选框的样式，包括去除默认样式、设置背景颜色、边框样式以及实现选中状态的特殊效果。通过CSS伪元素和伪类，可以创建美观且响应式的复选框设计。

摘要生成于 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: 22px;
	min-width: 22px;
	outline: none;
}
input[type="checkbox"]:checked {
    background: #3190e8;
}
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: 13px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg);
}