(Cascading Style Sheets) CSS 2.1 Reference

CSS Pseudo-class :focus Selector

What is a CSS Pseudo-class :focus Selector?

The :focus pseudo-class selector specifies the element with focus. In the following example, the border property will be set for the <input> element that has focus.

CSS Example:

  input:focus {border: medium dotted red;}

  <form action="example_input.php" method="post">
  <p>
   Text: <input type="text" name="texttest" title="text input sample">
   Password: <input type="password" name="passtest" size="10" maxlength="10"
     value="" title="password sample">
   <input type="submit" value="Send">
  </p>
  </form>

CSS Example:

  input:focus {border: medium dotted red;}

  <form action="example_input.php" method="post">
  <p>
   Text: <input type="text" name="texttest" title="text input sample" />
   Password: <input type="password" name="passtest" size="10" maxlength="10"
     value="" title="password sample" />
   <input type="submit" value="Send" />
  </p>
  </form>