CSS Beautify Checkbox

WBOY
Release: 2016-09-27 14:05:20
Original
1574 people have browsed it

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>
Copy after login

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>;
  }
Copy after login

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>
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template