Every now and then I’m handed a design comp that has customised checkboxes and radio buttons. This used to make me think “Oh no, not again” because I simply didn’t know of a reliable way to customise these particular form controls.
Sure, if all you care about is replacing the browser default with a custom graphic it isn’t that hard. But if like me you’re also interested in doing so without degrading user experience, especially during keyboard interaction, you have a number of problems to deal with.
Fortunately the situation is a lot better now than it was a few years ago. My first attempts at custom checkboxes and radio buttons involved quite a bit of JavaScript trickery to toggle between different states of the buttons, and I never got it to work perfectly cross-browser, cross-input device. However, since recent versions of all major browsers support the :checked CSS pseudo-class, you can now leave it to the browser to handle the states and focus on the CSS. No JavaScript involved.
Posted in Accessibility, CSS.
Copyright © Roger Johansson
