css 好看的复选框

CSS 好看的复选框

复选框在我们的网站中经常被使用到，但是默认的HTML复选框样式十分单调，没有任何美感。因此，使用CSS来美化复选框就变得尤为重要了。下面为大家介绍几种好看的CSS复选框样式。

/* 普通的CSS复选框样式 */input[type="checkbox"] {
        appearance: none;
     /* 隐藏默认样式 */    background-color: #f5f5f5;
     /* 设置背景色 */    border: none;
     /* 去除边框 */    width: 18px;
        height: 18px;
        vertical-align: middle;
     /* 垂直居中 */    cursor: pointer;
 /* 添加光标指针 */}
/* 复选框选中状态 */input[type="checkbox"]:checked {
        background-color: #1abc9c;
 /* 设置选中的背景色 */}
/* 添加复选框图标 */input[type="checkbox"]::before {
        content: '✔';
     /* 选中的图标 */    display: inline-block;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        line-height: 16px;
        font-weight: bold;
}
/* 复选框未选中 */input[type="checkbox"]:not(:checked)::before {
        content: ' ';
     /* 设置一个空格，达到未选中显示的效果 */    background-color: #f5f5f5;
        border: 1px solid #bdc3c7;
 /* 添加边框 */}
    

以上代码可以实现出一个简单但是好看的CSS复选框，当选中时，复选框会变成绿色，未选中时为灰色。另外，CSS的 ::before 伪类被使用来添加复选框图标。在选中状态下，使用了白色颜色，未选中状态下就显示一个空格。

当然，以上只是其中一种复选框样式，还有更多不同的样式可供开发者选用。这里提供的代码只是一个例子，如果需要自定义的话可以根据自己的需求进行更改。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！