使用CSS3美化复选框checkbox

最新推荐文章于 2025-06-13 11:13:44 发布

转载最新推荐文章于 2025-06-13 11:13:44 发布 · 3.2k 阅读

css 专栏收录该内容

29 篇文章

订阅专栏

本文介绍两种利用CSS实现美观复选框的方法：一种通过背景图片切换展示选中状态；另一种采用伪元素显示对勾图标。这两种方法都不依赖额外的脚本语言，仅用HTML和CSS即可实现。

方法一：使用图片

.checkbox {
    display: none;
}
.checkbox-i{
    margin-right: 20px;
    background-image: url("../img/icon.png");
    background-repeat: no-repeat;
    background-position: -324px -40px;
    width: 22px;
    height: 22px;
    display: inline-block;
    position: relative;
    top: 5px;
}

.checkbox:checked + .checkbox-i{
    background-position: -324px -11px;
}

<input type="checkbox" class="checkbox " id="test">
<label class="checkbox-i" for="test"></label>
<label class="label" for="test">test
</label>

方法二：使用after

.chk_1 {

display:none;

}

.chk_1 + label {
background-color: #FFF;
border: 1px solid #C1CACA;
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
padding: 9px;
border-radius: 5px;
display: inline-block;
position: relative;
margin-right: 30px;
}

.chk_1:checked + label {
background-color: #ECF2F7;
border: 1px solid #92A1AC;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
color: #243441;
}

.chk_1:checked + label:after {
content: '\2714';
position: absolute;
top: 0px;
left: 0px;
color: #758794;
width: 100%;
text-align: center;
font-size: 1.4em;
padding: 1px 0 0 0;
vertical-align: text-top;
}