Examples of using pure CSS to beautify radio and checkbox boxes

Source: Internet
Author: User

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+.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.