Implement checkbox with pure CSS

For the checkbox implemented by pure css, see my codepen.

The key is to hide the native input and use its related label to detect click events.

Then, the checkbox check is implemented by combining the border on the right and bottom, and rotating it.

Okay, let's look at the source code.

<div class="container">    <div class="checkboxouter">        <input type="checkbox">        <label class="checkbox"></label>             </div></div>

CSS is the key. SASS and Prefix free are used.

/* SASS variable definition */$ border-styles: 2px solid lightgrey; $ tick-color: #27ae60; $ box-color: # fff; /* align the page background and center, not the key code in this case */body {background-color: $ bgcolor ;}. container {position: absolute; top: 50%; left: 50%; height: 40px; width: 40px; text-align: center; transform: translate (-50%,-50% );} /* implement the outer border of the check box */. checkboxouter {height: 40px; width: 40px; border-radius: 3px; background-color: $ box-color; display: B Lock; border: $ border-styles; transition: all. 5 s ;}. checkboxouter: hover {transform: scale (1.5);}/* Original checkbox hiding */input [type = "checkbox"] {opacity: 0; background: red; position: absolute; cursor: pointer; z-index: 1; height: 100%; width: 100%; left: 0; top: 0 ;} /* is the check box in the implementation of this stuff */. checkbox {position: absolute; border-bottom: 3px solid lightgrey; border-right: 3px solid lightgrey; background-colo R: transparent; height: 20px; width: 10px; transform: rotate (45deg); transform-origin:-35% 30%; transition: all 0.2 s ;} /* label to activate the Click Event */input [type = "checkbox"]: checked ~. Checkbox {transition: all 0.3 s; border-bottom: 3px solid $ tick-color; border-right: 3px solid $ tick-color ;}

We recommend a click event processing tutorial on CSS. The use of CSS in 5m3d processes click events.

Well, today's article is a little simple. You can say, "Hai Han ., Please go to my codepen to edit and download the results online.

---------------------------------------------------------------
Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------