WebAIR

Does each control in the form highlight when it has focus? (FAC13)

Why Is This Important?

People with low vision or people with cognitive disabilities may benefit from a clear indication of which form control currently has focus. This is largely controlled by the user's browser. However, CSS can be used to provide an additional indicator.

How To Fix The Problem

Use the CSS ":focus" pseudo-class to select and style an input when it gains focus. These are well supported in most browsers and easy to apply.

Example

// Using the :focus CSS pseudo class
input:focus
{
background-color:yellow;
}

Further Information

  1. http://css-tricks.com/improved-current-field-highlighting-in-forms/
  2. http://css-tricks.com/multiple-login-form-highlight/
  3. http://www.htmldog.com/guides/cssintermediate/pseudoclasses/
  4. http://css-tricks.com/pseudo-class-selectors/
  5. http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/