自定义checkbox,redio等

最新推荐文章于 2024-10-10 00:22:48 发布

转载最新推荐文章于 2024-10-10 00:22:48 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/clj2017/p/8962166.html

本文通过CSS代码展示了如何自定义HTML中的复选框样式，包括未选中和选中状态的不同显示效果。

直接上代码：

看的懂看，看不懂拉到。

.messageState li {list-style: none;float: left;padding-right:30px;font-size: 16px;color: #1e1e1e;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;}
.messageState li input[type="checkbox"] {position: absolute;clip: rect(0, 0, 0, 0);}
.messageState li input[type="checkbox"] + label::before {
    content: "\a0";
    display: inline-block;
    vertical-align: 0px;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    text-indent: 2px;
    line-height: 13px;
}
.messageState li input[type="checkbox"]:checked + label::before {
    content: "\2713";
    color: white;
    background-color: #009FE1;
}
.messageState li input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 1px 3px #eee;
}
.messageState li input[type="checkbox"]:disabled + label::before {
   box-shadow: none;
    background-color: gray;
    color: #555;
}