Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Applying Cascading Style Sheet Properties to Form Elements 359

12

Output ▼

Just like the progress bar, you should also include a textual representation of your meter
gauge for those browsers that don’t support it.

And just like progress, to style your meters, you need to use pseudo-classes and browser
prefixed properties. But rather than just the meter and the value, you need to style how it
should look when the value is the best it can be, a middle value, and the worst it can be.
Table 12.1 describes those values.

TABLE 12.1 Pseudo-Classes to Style the Meter Element

Safari/Chrome Firefox

Meter bar -webkit-meter-bar -moz-meter-bar

Best value -webkit-meter-bar-optimum-value -moz-meter-optimum

Middle value -webkit-meter-suboptimum-value -moz-meter-suboptimum

Worst value -webkit-meter-even-less-good-value -moz-meter-sub-sub-optimum

And, yes, the pseudo-class really is -webkit-meter-even-less-good. Don’t blame me; I
didn’t name it. Style these just like you did the progress bars or any other element.

Applying Cascading Style Sheet Properties to Form Elements

In this lesson, I’ve already shown you some approaches you can take to managing the
layout of your forms with CSS. Now I explain how to alter the appearance of form input

FIGURE 12.27
Three meter sta-
tuses.