Custom Radio and Checkbox using CSS

Question

is there a way to style the radio button and checkbox using custom images. using just CSS ?

Can some one point me how it can be done ?

Else which are the best plugins for jquery to do so ?

Solution 1

Check CSS - Styling Checkboxes, Radio buttons & dropdowns

Solution 2

You can do it with pure css3, using the pseudo class :checked. Inspired by this article I got the following solution:

Features:

• only css
• no id attribute needed
• no z-index needed

Try it on jsfiddle: http://jsfiddle.net/tlindig/n6by8/6/

HTML:

<label>
    <input type="radio" name="rg"/><i></i>
    option 1
</label>
<label>
    <input type="radio" checked name="rg"/><i></i>
    option 2
</label>
<label>
    <input type="radio" name="rg"/><i></i>
    option 3
</label>

CSS:

input[type="radio"] {
    display:none;
}
input[type="radio"] + i:before {
    content:'\2718';
    color:red;
}
input[type="radio"]:checked + i:before {
    content:'\2713';
    color:green;
}

Some explanations:

Element i is needed to add pseudo element :before with the icon as content. input elements are empty tags and can not have pseudo elements like :before and :after so we need a extra element. You could also use span or div, but i is shorter.

label is needed to trigger the input. If you wrap the input with a label element, you do not need id and for attributes for association.

'\2718' and '\2713' are UTF8 character codes for "ballot X" and "check mark".

Instead of content you could also set a background-image or what ever you like.

It works in all modern browsers and ie9+.

Solution 3

jQuery UI has some excellent and easily implementable options:

http://jqueryui.com/demos/button/#checkbox

Solution 4

Not sure you'll be able to do this with pure CSS, but this way is great way with javascript:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Solution 5

Checkout WTF, forms from a creator of Bootstrap Mark otto. It has good styles for checkbox and radio.

View more solutions