HTML and CSS Reference
In-Depth Information
and error messages
Whenever we present the new intelligent form fields at confer-
ences, someone asks us how to style these new fields and error
messages.
Yo u c a n d of s of m e b a s i c s t y l i n g of n m of s t of f t h e n e w c of n t r of l s :
fonts, colours, and the like. With some controls, however, using
current CSS is more problematic. For example, with a
type=range
slider, what does
color
refer to and what would
background-
color
style? What would
border-radius
affect? How would you
change the colour of the “track” that the slider runs along?
The natural home for adding new CSS hooks for styling form
fields is the enticingly named CSS Basic User Interface Module
(
http://www.w3.org/TR/css3-ui/
)
. This has been around since
2004 and—now that browsers have caught up with it—this spec-
ification is being updated by Tantek Çelik.
There already are some useful ideas that you can implement
right now—for example, you can use the
:invalid
pseudo-class
to style a form field to show that its contents are invalid, so the
user gets that feedback immediately, without having to hit sub-
mit. This CSS styles invalid form fields with a red border, and
valid inputs green:
input:invalid {border:2px solid red;}
input:valid { border: 2px solid green; }
Unfortunately, this presents several usability problems. A
required input, for example, is invalid at page load (because
it's required but is blank) and therefore the styles will be set,
which is off-putting to the user. An
input type=email
will be
invalid the moment the user starts typing, until the first charac-
ter after “@” is entered, because until that time it's not a valid
email address.
The mighty Patrick Lauke (one of this topic's technical editors)
suggests using a combination of
:focus
, to mitigate the problem
and only show the styling when the user is interacting with that
particular form field:
input:focus:invalid {border:2px solid red;}
input:focus:valid {border: 2px solid green;}
