Custom Radio Buttons

Client want each and every element on the page in the same look and feel of his theme design.  But when it comes to elements like text box, select box, radio buttons, we used to worry but thanks to CSS3, now we can satisfy the clients with this magic wand.  Following is the syntax for customizing a radio button.

Use Following HTML:

<div class="personalTouch">
  <input type="radio" id="radio01" name="radio">
  <label for="radio01"><span></span>cm</label>
</div>

<div class="personalTouch">
  <input type="radio" id="radio02" name="radio" checked="">
  <label for="radio02"><span></span>Inches</label>
</div>

Use following CSS:

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

.personalTouch input[type="radio"] {
margin: 3px 3px 0px 5px;
}
.personalTouch input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: #141414 url(http://jaydharphics.com/images/radioUnchkd.png) no-repeat;
    cursor:pointer;
    font-size:15px;

}
.personalTouch label{font-weight:normal;}
.personalTouch input[type="radio"]:checked + label span {
    background: #141414 url(http://jaydharphics.com/images/radioChkd.png) no-repeat;

}

DEMO:

.Dilip Kumar

.Amitabh Bachan

.Shahrukh Khan