WebKit browsers (Safari, Chrome, Konqueror) have vendor-specific implementation of the CSS appearance property, as well as full support for the :checked and :disabled pseudo classes. The property is called -khtml-appearance and it’s default value is visual. When set to none, it turns the specified control(s) to a blank slate, and this, combined with :checked, :hover and :disabled provides the ability of practically any styling of checkboxes and radiobuttons without any JavaScript or complex layout tricks. All we need is a sprite that contains all possible states (checked, unchecked, hover) of checkboxes and radiobuttons and as few as 50 lines of CSS.

DIRECT LINK »