首页 > 代码库 > CSS 美化复选框 - 无图片方式

CSS 美化复选框 - 无图片方式

2024-08-14 22:07:11   214人阅读

今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧，如下是3种不同状态下的效果：

技术分享

 

一. Html结构

<div class="check-wrap">     <input type="checkbox" class="icheck" id="icheck" />     <label for="icheck" class="ilabel"></label></div>

注： label 标签的 for 属性值必须指定为 input 的 id 名称。

 

二. CSS 代码

.check-wrap{     position: relative;     height: 24px;     width: 24px;}.icheck{     opacity: 0;}.ilabel{             border-radius: 3px;         cursor: pointer;     display: block;     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;}.ilabel:after{     content: " ";     border: 2px solid #DDD;             display: block;     font-weight: bold;     text-align: center;     border-radius: 3px;     width: 20px;     height: 20px; } .icheck:checked + .ilabel:after{     content: "?";     border-color: #3f51b5;     background-color: #3f51b5;     color: #fff;  }  .icheck:indeterminate + .ilabel:after{     content: "■";     color: #3f51b5;     background-color: #FFF;     border-color: #3f51b5;  }

 

1. 将原有的 input 标签透明度设为0

2. label:after 的宽高设置 20px 是因为 border 占据了4px

3. checkbox 的 indeterminate 状态大家用的可能比较少（效果图中的第2个状态），只能通过 js 进行设置，这种情况通常用在树型结构（即：子节点有选中但并未全部选中的时候父节点的状态）

<script>     var icheck = document.getElementById("icheck");     icheck.indeterminate = true;</script>

 

代码量真的挺少的，不明白的话请留言，谢谢.... :)

 

CSS 美化复选框 - 无图片方式


联系
我们