The :Focus Pseudo-Class

This example demonstrates how to use the :focus pseudo-class:

HTML file: Displayed by browser:
<style>
input:focus {
    background-color: yellow;
}
</style>
<body>
<form action="form_action.asp" method="get">
<p>Click on input box to see the effects of the :focus pseudo-class.</p>
  First name: <input type="text" name="fname">
<br /><br />
  Last name: <input type="text" name="lname">
<br /><br />
  <input type="submit" value="Submit">
</form>
</body>

Click on input box to see the effects of the :focus pseudo-class.

First name:

Last name:

Note: IE8 supports the :focus pseudo-class only if a !DOCTYPE is specified.

Back button Table of Contents Next button