読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

:focus疑似クラス

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

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

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

という仕組み。

<?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>

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