Examples of using pure CSS to beautify radio and checkbox boxes

Single-box radio and multiple-marquee checkboxes need landscaping? Of course, the original style of the past century has not met the needs of our customers. form a lot of control needs to beautify, we have the use of JavaScript to do landscaping, there are direct use of CSS to beautify, today I introduce you to use a pure CSS to achieve radio and checkbox landscaping.

We know that a lot of use JS to beautify form control is not very ideal, need to introduce JS and CSS, and some even use pictures and font icons, but also rely on jquery, and complex, maintainable poor.

Using Magic-check

Magic-check uses only dozens of lines of CSS code to beautify the checkbox and radio forms. First load the CSS file.

@keyframes Hover-color {
from {
Border-color: #c0c0c0; }
to {
Border-color: #3e97eb; } }

. Magic-radio,
. magic-checkbox {
Position:absolute;
Display:none; }

. magic-radio[disabled],
. magic-checkbox[disabled] {
cursor:not-allowed; }

. Magic-radio + Label,
. Magic-checkbox + Label {
position:relative;
Display:block;
padding-left:30px;
Cursor:pointer;
Vertical-align:middle; }
. Magic-radio + Label:hover:before,
. Magic-checkbox + Label:hover:before {
animation-duration:0.4s;
Animation-fill-mode:both;
Animation-name:hover-color; }
. Magic-radio + Label:before,
. Magic-checkbox + Label:before {
Position:absolute;
top:0;
left:0;
Display:inline-block;
width:20px;
height:20px;
Content: '
border:1px solid #c0c0c0; }
. Magic-radio + Label:after,
. Magic-checkbox + Label:after {
Position:absolute;
Display:none;
Content: '}

. magic-radio[disabled] + label,
. magic-checkbox[disabled] + Label {
cursor:not-allowed;
Color: #e4e4e4; }
. magic-radio[disabled] + label:hover,. magic-radio[disabled] + Label:before,. magic-radio[disabled] + label:after,
. magic-checkbox[disabled] + label:hover,
. magic-checkbox[disabled] + Label:before,
. magic-checkbox[disabled] + label:after {
cursor:not-allowed; }
. magic-radio[disabled] + Label:hover:before,
. magic-checkbox[disabled] + Label:hover:before {
border:1px solid #e4e4e4;
Animation-name:none; }
. magic-radio[disabled] + Label:before,
. magic-checkbox[disabled] + Label:before {
Border-color: #e4e4e4; }

. magic-radio:checked + Label:before,
. magic-checkbox:checked + Label:before {
Animation-name:none; }

. magic-radio:checked + Label:after,
. magic-checkbox:checked + Label:after {
Display:block; }

. Magic-radio + Label:before {
border-radius:50%; }

. Magic-radio + Label:after {
top:7px;
left:7px;
width:8px;
height:8px;
border-radius:50%;
Background: #3e97eb; }

. magic-radio:checked + Label:before {
border:1px solid #3e97eb; }

. magic-radio:checked[disabled] + Label:before {
border:1px solid #c9e2f9; }

. magic-radio:checked[disabled] + label:after {
Background: #c9e2f9; }

. Magic-checkbox + Label:before {
border-radius:3px; }

. Magic-checkbox + Label:after {
top:2px;
left:7px;
Box-sizing:border-box;
width:6px;
height:12px;
Transform:rotate (45DEG);
border-width:2px;
Border-style:solid;
Border-color: #fff;
border-top:0;
border-left:0; }

. magic-checkbox:checked + Label:before {
border: #3e97eb;
Background: #3e97eb; }

. magic-checkbox:checked[disabled] + Label:before {
border: #c9e2f9;
Background: #c9e2f9; }

. demo{width:360px;margin:50px auto 10px auto;padding:10px;}
. Demo img{width:90%}
. Demo H3{font-size:1.5em;line-height:1.9em}

. col{margin-top:20px}
. Col h4{height:40px;line-height:40px}
. opt{height:30px;line-height:24px}

Then, just add a CSS class Magic-checkbox or Magic-radio to the INPUT element.

Radio

Normal
Checkbox

Normal

Careful friends can look at the CSS code, has been packaged to download. CSS hides the checkbox and radio, then uses: Before and: After positioning redraw the checkbox and radio appearance, so as to achieve beautification effect, support ie9+.