Using Dynamic Outlines - HTML

Outlines provide another layer around the element to allow the user agent to highlight elements. For example, Shows the default outline provided by Internet Explorer when a check box label is in focus.

The default outline provided by Internet Explorer—shown around the Friend label.

The default outline provided by Internet Explorer—shown around the Friend label.

Note:Outlines are positioned directly outside the border of elements. The position of the outline cannot be moved directly, but can be influenced by the position of the border. Note that the outline does not occupy any space, and adding or suppressing outlines does not cause the content to be reflowed.

Using CSS you can modify the look of these outlines. Unlike the other properties covered in this chapter, all sides of the elements outline must be the same; you cannot control the sides individually.

The outline properties are outline-color, outline-style, outline-width, and the shorthand property outline. These properties work exactly like the other properties in this chapter, allowing the same values and having the same effects. Note that 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 pseudo-elements allow you to specify that an element’s outline is visible only when the element has the focus or is active. For example, the following definitions specify a thick red border when form elements have focus and a thin green border when they are active:

form *:focus { outline-width: thick; outline-color: red; } form *:active { outline-width: thin; outline-color: green; }

Note:At the time of this writing, none of the popular Web browsers (Internet Explorer, Opera, Mozilla, and so on) handle outlines consistently or correctly. Some do not allow the outline to be modified, and some do not properly track focus or active elements. Therefore, when using outlines, it is best to extensively test your code on all platforms you will support.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics