/ Published in: CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
div {position: relative;} div > input { height: 16px; width: 16px; position: absolute; left: 0; opacity: 0; } div > label { line-height: 16px; padding: 0 0 0 18px; font-size:15px; } input + label { background: url(../img/gr_custom-inputs.png) 0 -1px no-repeat; height: 16px; } input[type=radio] + label { background-position: 0 -161px; } /* Checked styles */ input[type=radio]:checked + label { background-position: 0 -241px; } input[type=checkbox]:checked + label { background-position: 0 -81px; } /* Disabled styles */ input[type=radio]:disabled + label { background-position: 0 -221px; } input[type=checkbox]:disabled + label { background-position: 0 -61px; } /* Disabled and Checked styles */ input[type=radio]:disabled:checked + label { background-position: 0 -301px; } input[type=checkbox]:disabled:checked + label { background-position: 0 -141px; } <div><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></div>