Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Image-Free Custom Checkboxes and Radio Buttons with CSS3

by Durodola Ridwan | Tuesday, April 22, 2014 | 4 Comments

With CSS3 we can customize web presentations or form elements to be almost anything we want. Some of the form elements that are a bit tricky to style are checkboxes and radio buttons. If you have been battling with the styling, then this post is for you.


  View Demo  

The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with CSS3 styling. Then use the :checked and :disabled selector to alternate the styling between their checked, unchecked and disabled versions.


The CSS

As you can see we have turn the label cursor to a pointer to indicate that it is clickable. Also we leave the label cursor for disabled version as default and reduce Its opacity to 4 to indicate that it's un-clickable.

Next, we utilize the CSS3 :checked pseudo-class along with the Bullet HTML character ("\2022"). So, when the input radio (which is hidden) is checked or selected, a smaller circle will appear. Also, we added the checked sign the same way we did with the radio input type. This time we use check mark HTML Character ("\2714").

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
    list-style: none !important;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
    list-style: none !important;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    border-radius: 100%;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}


The HTML

Nothing fancy really happened here, just a regular semantic form without any additional markup, supporting natively keyboard navigation and accessibility intact.

<!-- markup for custom radio buttons -->
<ul class="css3-radios">
    <li><label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label></li>
</ul>
<!-- / markup for custom radio buttons -->
<!-- markup for custom check boxes -->
<ul class="css3-checkboxes">
    <li><label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label></li>
</ul>
<!-- / markup for custom check boxes -->


Since we are using the CSS3 :root and :checked element, which is ignored by non-CSS3 browsers, so they will display the normal check boxes and radios. You may need a jQuery plugin for better  compatibility.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

4 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. As a matter of first importance expressing gratitude toward you for this splendid post and I like this. Furthermore today the vast majority of them are relies on upon the online essay writing service. Write my paper for cheap is a typical inquiry from the readers in this manner it is go about as a GOOD AND EXCELLENT POSTY for such inquiries give better and powerful essay writing service to the students.

    ReplyDelete
  2. iPhone have a line of smartphones designed and marketed by Apple Inc.Now to use Iphone 7 without any Problem and restrictions imposed by Iphone's IOS.
    You can Download iPhone 7 Jailbreak from CydiaNerd

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger