Pseudo-class UI selectors in Forms

Pseudo-class UI selectors in Forms

CSS3 provides us with three pseudo-class user interface selectors that will come in very handy when styling interactive forms and applications. The enabled, disabled, and checked pseudo-class selectors allow us to style elements based on their current state within a form or an application.

As the name suggests, user interface selectors are designed to control the styling of user interfaces.

The enabled and disabled pseudo-class selectors allow you to define styling for any form elements that are either in the enabled or disabled state. By default, form elements are considered enabled but through the use of JavaScript or the disabled attribute you can change the state for a Button, Command, Fieldset, Input, key generation, option group, Option, Select and Textarea elements.

Support for these user interface pseudo-class selectors is broad but there is a lack of support in Internet Explorer prior to the release of IE9. To make the styling work in Internet Explorer, you'll need to use a workaround such as dynamically assigning classes through JavaScript.

Here are some examples of how to use the pseudo-class

comments powered by Disqus