CSS beautification check box and css beautification check box

CSS beautification check box and css beautification check box

Today, I will share with you a method that does not use the image beautification check box. Let's take a look at the following results in three different states:

 

I. Html Structure

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

Note: The for Attribute Value of the label Must be specified as the input id.

 

Ii. CSS code

.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. Set the transparency of the original input label to 0.

2. label: after width and height are set to 20 PX because border occupies 4 PX

3. the indeterminate status of the checkbox may be less frequently used (2nd of the State) and can only be set through js. This situation is usually used in a tree structure (I .e: the status of the parent node when the child node is selected but not all are selected)

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

 

The amount of code is really small. If you don't understand it, please leave a message. Thank you ....:)