Input Field Borders

• Web designers bring attention to an active text input field by using the focus rule to highlight the border of the field. This design strategy sets the active field apart from the other fields and enables the Web user to clearly see in which input field his cursor is located. This helps prevent input mistakes. For instance, a Web designer could place a 2-pixel, solid red highlight around the border of an input field that requests the first name of the Web user. This would bring attention to the first name field and help the Web user avoid a mistake such as entering his last name. The CSS rule to create this functionality would look like this: input:focus { border: 2px solid red;}.
  
  

Input Field Backgrounds

• The focus rule can also be used to style the background of a keyboard input field. For example, using the previous example, the designer could style the background of the first name input field. He might style the field by displaying a bright yellow background in addition to the red border when the field is activated. He could do this by enhancing the CSS focus rule to look like the following: input:focus { border: 2px solid red; background-color:yellow;}.
  
  

Links

• The focus pseudo-class is not limited to just form input fields. The focus class is also available for use in styling links or anchor tags when the website visitor navigates to the link using a keyboard. Traditionally, the hover pseudo-class is used by Web designers to style links that the user is hovering over. This style is applied when the user hovers her mouse over the link prior to the time that she clicks on the link. The design strategy sets the link apart from the text on the Web page. However, the hover rule does not apply when the user navigates to the link using a keyboard. Web designers who also style the link with the focus class ensure that those users who navigate with a keyboard see the same link styling as those who navigate with a mouse. This is a CSS rule that uses the focus class to place a red background behind a link when a Web user navigates to the link with a keyboard: a: focus {background:red;}.
  
  

Browser Compliance

• Some of the older browsers do not recognize the CSS focus pseudo-class. Users of Internet Explorer version 7 and earlier will not see this design rule.