CSS 复选框样式

最新推荐文章于 2024-03-20 10:44:35 发布

脆脆鲨_HCC

最新推荐文章于 2024-03-20 10:44:35 发布

阅读量182

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_40067662/article/details/87602251

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

checkbox重写*/
       .regular-checkbox {
       display: none;
       }
       .regular-checkbox + label {
       position: relative;
       display: inline-block;
       /*lable是内联元素所以需要加inline-block*/
       padding: 8px;
       /*设置复选框大小*/
       background:url(../img/nocheck.png) no-repeat ;
       background-size:cover;
       vertical-align: middle;
       cursor: pointer;
       }
       /*第三部分做一个active的效果*/
       .regular-checkbox + label:active, .regular-checkbox + label:checked + label:active {
       background:url(../img/checkon.png) no-repeat ;
       background-size:cover
       }
       /*选中之后的样式*/
       .regular-checkbox:checked + label {
       background:url(../img/checkon.png) no-repeat ;
       background-size:cover
       }

       .regular-checkbox + label+span{
       vertical-align:middle;
       margin-left:.1rem;
       margin-right:.3rem

       }