focus

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Applied To all elements which may have the focus (<A>, <INPUT>, <SELECT> and <TEXTAREA>)
HTML analog <tag onfocus="function()">
Reference to specification http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Description
The pseudo-class focus defines style for an element receiving focus. For example, the text field of the form in which the cursor is determined can be it.

Syntax

element:focus { ... }

Arguments
No.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>focus</title>
  <style type="text/css">
   #enter .label {
     width: 80px; /* Block width with the text */
     float: left; /* Location in one line with the area */
     text-align: right; /* Right alignment */
   }
   #enter .form-text {
     width: 240px; /* Area width */
     margin-left: 10px; /* Distance between area and the text */
     border: 1px solid #abadb3; /* Frame around text area */
     padding: 2px; /* Areas around the text */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Bottom indent */
   }
   #enter .form-text:focus {
     background: #ffe; /* Background color */
     border: 1px solid #29B0D9; /* Frame parameters */
   }
   #enter p {
    margin-left: 90px; /* Right shift */
   }
  </style>
 </head>
 <body>
  <form action="login.php" method="post" id="enter">
   <div class="form-item">
     <span class="label">Login:</span>
     <span class="field"><input type="text" id="login" value="" class="form-text"></span>
   </div>
   <div class="form-item">
     <span class="label">Password:</span>
     <span class="field"><input type="password" id="pass" class="form-text"></span>
   </div>
   <p><input type="submit" value="Enter"></p>
  </form>
 </body>
</html>

The result of this example is shown on the figure 1. When focus is received the text area changes color of background and border.