mercredi 24 août 2011
Styling checkbox and radio button inputs to match a custom design is nearly impossible because neither reliably supports basic CSS, like background colors or images; it's even a challenge to get the margins to appear consistently across browsers. To remedy this we developed a concise jQuery plugin based on progressive enhancement that leverages an input element's built-in functionality and accessibility features and works in all modern browsers without added markup or mandatory CSS classes.
In the past few years web application interface designs have evolved from flat metal gray to having rich color palettes and dimensional background images thanks to the adoption of web standards and advanced CSS techniques. Form checkboxes and radio buttons have lagged behind, though, because only a few browser vendors have built in support for styling these elements with CSS, and inconsistently at that. A quick search turned upseveral workaround scripts that cleverly use a combination of JavaScript and CSS to apply a custom skin to these form elements, however they sometimes do more work than we need them to by inserting replacement markup, or requiring that specific classes be assigned to every applicable form element.
When considering how to build our own customized input script, we set out to do as little as possible — on their own, checkboxes and radio buttons capture data and display feedback, and we wanted to use that native functionality and not reinvent it using JavaScript. If we let the user interact with the inputs as expected, we'd only have to apply a lightweight script to layer on visual enhancements for richer feedback. And by keeping our hands off the inputs' native functionality, we were able to preserve their inherent keyboard accessibility and avoid the need to use ARIA attributes since a screen reader is still interacting with the native form element.
Inscription à :
Publier les commentaires (Atom)
Currently have 0 comments: