2. The HTML:
<ul> <li> <input type="checkbox" id="CheckBox1" checked="checked" /> <label for="CheckBox1">Checkbox 1</label> </li> <li> <input type="checkbox" id="CheckBox2" /> <label for="CheckBox2">Checkbox 2</label> </li> <li> <input type="checkbox" id="CheckBox3" disabled="disabled" /> <label for="CheckBox3">Checkbox 2</label> </li> </ul> <ul> <li> <input type="radio" id="Radio1" checked="checked" name="radio" /> <label for="Radio1">Radio 1</label> </li> <li> <input type="radio" id="Radio2" name="radio" /> <label for="Radio2">Radio 2</label> </li> <li> <input type="radio" id="Radio3" name="radio" disabled="disabled" /> <label for="Radio3">Radio 2</label> </li> </ul>
3. And the CSS, where we make use of attribute selectors, pseudo classes, and of course -khtml-appearance
set to none
:
label { font: normal 12px/20px Arial, Sans-serif; color: black; vertical-align: middle; } /* common settings checkbox and radiobutton */ input[type="checkbox"], input[type="radio"] { -khtml-appearance: none; background: url('RadioAndCheckBoxSprite.gif') no-repeat; width: 20px; height: 20px; vertical-align: middle; } input[type="checkbox"] { background-position-x: left; } input[type="radio"] { background-position-x: right; } input[type="checkbox"]:hover, input[type="radio"]:hover { background-position-y: -40px; } input[type="checkbox"]:checked, input[type="radio"]:checked { background-position-y: -20px; } input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover { background-position-y: -60px; } /* disabled settings for checkbox and radiobutton */ input[type="radio"]:disabled, input[type="checkbox"]:disabled { opacity: .3; }
FireFox has a similar implementation of the property called -moz-appearance
, however its default value is none
, and at present the above approach cannot be used for any browser but Safari and Google Chrome.
The full example is available for download at this link. You can play with the online demo on this page.
You may also be interested in the following scripts that take control on the visual appearance of other form elements.
Find more experiments here.
© 2006 - 2023 Martin Ivanov