CSS Styling Radio Button and Checkboxes

radio-button-css-style

The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much tells what we want to achieve.

Now we want to do this without using Javascript or JQuery. Just plain HTML and CSS. Nothing fancy.

Lets dive into code.

1. The HTML

The HTML should looks pretty much like HTML. Nothing fancy here either. Just a bunch of radiobuttons following by labels.


    <input type="radio" id="radio1" name="radios" value="all" checked>
       <label for="radio1">iPhone</label>
    <input type="radio" id="radio2" name="radios"value="false">
       <label for="radio2">Galaxy S IV</label>
    <input type="radio" id="radio3" name="radios" value="true">
       <label for="radio3">Nexus S</label>

2. The CSS

Now the magic is in CSS. We want to change the look n feel of traditional radiobuttons into sexy pushbuttons.

Before we see the CSS, lets check one important CSS selector which you might not know already. It is called Adjacent sibling selectors. The idea is to select an element next to another element using syntax E1 + E2. So if I write a CSS code like:


div + p {
     color: red;
}

This should select only those <p> elements which are adjacent (i.e. next to) <div> tags! This can come handy in lot of scenarios when you want to apply certain style to element based on their sequence.

So now we got the idea and know how Adjacent selector is used, lets apply that in our problem at hand.


/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

Demo

JSFiddle: http://jsfiddle.net/viralpatel/p499h/

Voilla!! That works!! Although they look different, these are basically radiobuttons at heart. You can create forms using these buttons and on submit, can handle values at server side as normal radiobuttons. No Javascript, no jquery hacks..

3. More CSS

Lets add some more style to these radiobuttons and make them look more pushbutton’ish. Style courtesy Twitter Bootstrap


        input[type=radio] {
                display:none;
        }

        input[type=radio] + label {
                display:inline-block;
                margin:-2px;
                padding: 4px 12px;
                margin-bottom: 0;
                font-size: 14px;
                line-height: 20px;
                color: #333;
                text-align: center;
                text-shadow: 0 1px 1px rgba(255,255,255,0.75);
                vertical-align: middle;
                cursor: pointer;
                background-color: #f5f5f5;
                background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
                background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
                background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
                background-image: -o-linear-gradient(top,#fff,#e6e6e6);
                background-image: linear-gradient(to bottom,#fff,#e6e6e6);
                background-repeat: repeat-x;
                border: 1px solid #ccc;
                border-color: #e6e6e6 #e6e6e6 #bfbfbf;
                border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
                border-bottom-color: #b3b3b3;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
                filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
                -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
                -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        }

        input[type=radio]:checked + label {
                   background-image: none;
                outline: 0;
                -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
                -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
                box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
                        background-color:#e0e0e0;
        }

Demo

JSFiddle: http://jsfiddle.net/viralpatel/p499h/

The Checkboxes

Same technique can be applied on checkboxes. Just replace type=radio with type=checkbox in above CSS and see how normal looking html checkbox changes into pushbutton checkbox.