PSEUDO-CLASSES: focus
focus
 
Compatibility:  N6+
Version: Level 2
 
The focus pseudo-class is used to effect style when an HTML anchor or form element come into focus. As an example, you could highlight each form element with a background color as it came into focus. On a complicated form, this highlight draws the user's eye to the element.
 
By focus, we mean that the cursor is at that element. For example, if the element was an input text box in a form, the cursor would appear inside the element and you could type and enter data into the text box.
 
There are several ways that an element can come into focus. Perhaps the most common way, is that the user simply clicks the mouse onto the element. A more complex example occurs when a JavaScript function is used to check a submitted form, and then assigns focus to a specific element contained in the form that is not filled out properly. This concept is exampled in detail in the Client-side Form Verification in JavaScript Knowledge Base article.
 
A pseudo-class is assigned to a selector via following syntax:
 
selector:pseudo-class { property: value; ...; }
 
A pseudo-class can also be used with the value assigned as a class to a selector:
 
selector.class:pseudo-class { property: value; ...; }
 
The focus pseudo-class is poorly implemented.
 
The focus pseudo-class can also be combined with other pseudo-classes, such as hover. Here is a code example (however this feature is very poorly implemented):
 
a.example:focus:hover {color: red; background-color: yellow; text-decoration: none;}
 
Code:
<html>
<head>
<title>ocus test</title>
<style type="text/css">
a.example:focus {color: red; background-color: yellow; text-decoration: none;}
</style>
</head>
<body>
<a href="http://www.devguru.com">
DevGuru</a>
</body>
</html>
 
This will work on Netscape 6+. Click and hold down, and note the change in appearance.
 
Output:
DevGuru

Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information