:focus疑似クラス - うなの日記

:focus疑似クラスで、コントロールにフォーカスがある場合のスタイルを指定可能です。

「:visited」などの仲間で、同じようにセレクタで使えます。
注:残念ながらIE6以下では未対応のため使えません。
- どうしてもという場合は、ずっと工事中 - IEで:focus擬似クラスを適用するためのCSSのようなハックはあるみたいです。

使用例として、クリックやタブでフォーカスが移動した場合にのみ編集できる(ように見える)テキストエリアを作ってみました。

フォーカスがない場合は、CSSで枠を消し、普通のテキストのように見せる。
フォーカスが移動した場合、枠を描画し、テキストエリア風に見せる。

という仕組み。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      body {
        background: #F6F6F6;
        margin: 20px;
      }
      /** 通常のテキストエリアに適用するCSS */
      textarea {
        width: 400px;
        height: 200px;
        color: #666;
        background: #F6F6F6;
        border: none;
      }
      /** フォーカスがあるテキストエリアに適用するCSS */
      textarea:focus {
        color: #333;
        background: #FFF;
        border: 1px inset #333;
      }
    </style>
  </head>
  <body>
    <textarea>クリックで編集</textarea>
  </body>
</html>

実行結果はこちら。なにかに使える?かな。