martedì, agosto 28, 2007

Focus is a pseudoclass (who knew?)

Ever wanted to prevent Firefox from displaying a border when a hyperlinked object receives focus? Sure you have. Thanks to MB for mentioning this behavior.

a:focus {

                -moz-outline:0;

                outline:0;

                outline-offset:0;

}

*

Hungry for more knowledge? Here it is from the w3.

Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus. These outlines are in addition to any borders, and switching outlines on and off should not cause the document to reflow. The focus is the subject of user interaction in a document (e.g., for entering text, selecting a button, etc.). User agents supporting the interactive media group must keep track of where the focus lies and must also represent the focus. This may be done by using dynamic outlines in conjunction with the :focus pseudo-class.

Example(s):

For example, to draw a thick black line around an element when it has the focus, and a thick red line when it is active, the following rules can be used:

:focus  { outline: thick solid black }

:active { outline: thick solid red }