Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

15.5. Dynamic Outlines

Outlines are another layer that exists around an element to allow the user agent to highlight the element, if necessary. This generally happens when a form element receives focus. The position of the outline cannot be moved, but it can be influenced by the position of the element's border. Note that outlines do not occupy any space; the element occupies the same amount of space whether its outline is visible or not.

Figure 15-6 shows an example of a dynamic outline around the Phone label.

Figure 15-6. Figure 15-6

Using CSS you can modify the look of outlines. However, unlike other properties covered in this chapter, all sides of an outline must be the same. The CSS properties governing outlines include outline-color, outline-style, outline-width, and the shorthand property outline. These properties operate much like the other properties in this chapter, allowing the same values and having the same effects. The format of the outline shortcut property is as follows:

outline: outline-color  outline-style  outline-width;

To use the outline properties dynamically, use the :focus and :active pseudoelements. These two pseudoelements specify when an element's outline should be visible—when it has focus or when it is active. For example, the following definitions specify a thick green border when form elements have focus and a thin blue border when they are active: ...