CSS Reference

":focus" - css pseudo-class (v. css 2)

  • Will add a style to an element that has keyboard input focus.
  • HTML usage: all elements
  • Browsers that support the :focus - pseudo-class :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
    Browser deviation:
    • To work in IE, a DOCTYPE must be declared.
Typical usage:
input:focus { color: blue }   

Pseudo-class ":focus" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      input[type="text"]:focus {
        background-color: #FFF8DC;
        color: #1E90FF;
        width: 200px;
      }
    </style>
  </head>
  <body>
      <p id="input">The input box expand with new<br>
        colors when it has focus:<br>
        <input type="text" size="10"/>
      </p>
     <p><b>Note:</b> For :focus to work in
      IE, a DOCTYPE must be declared.</p>
  </body>
</html>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.