CSS Beautify Checkbox

Today I will share with you a way to beautify the checkbox without using pictures. Let’s take a look at the renderings. The following are the effects in 3 different states:

1. Html structure

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="check-wrap"</span><span style="color: #0000ff;">></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="icheck"</span> <span style="color: #0000ff;">/></span>
     <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="icheck"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="ilabel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

Note: The for attribute value of the label label must be specified as the id name of the input.

2. CSS code

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

1. Set the original input label transparency to 0

2. The width and height of label:after are set to 20px because the border occupies 4px

3. The indeterminate state of checkbox may be rarely used by everyone (the second state in the rendering), and can only be set through js. This situation is usually used in tree structures (ie: child nodes are selected but not The state of the parent node when all are selected)

<script>
     <span style="color: #0000ff;">var</span> icheck = document.getElementById("icheck"<span style="color: #000000;">);
     icheck.indeterminate </span>= <span style="color: #0000ff;">true</span><span style="color: #000000;">;
</span></script>

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