focus擬似クラス

TOPページに戻る > CSS

スポンサード リンク

focus擬似クラス

要素にフォーカスがあたったときに要素にスタイルを設定します
主にテキスト入力欄などに使うことが多いです
マウスでクリックした場合やTabキーで移動してフォーカスしているときに適用されます

※ie6、ie7はfocus擬似クラスに対応していません(ie8から使えます)

使い方(書式)
要素名:focus { プロパティ : 値 }
対応ブラウザ ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

実際の指定方法

cssファイル

input:focus {
   background-color: #F0FFF0; /* 背景色を変更 */
   border: 1px solid #FFE4C4; /* 枠線のスタイルを変更 */
   padding:5px;               /* 内側のスペースを少し空ける */
}

html部分

<input type="text" size="12" name="sample1" value="input要素">

実際の表示

ie6、ie7以外のブラウザでクリックしてください

要素をclassセレクタやidセレクタで絞り込む


focus擬似クラスはセレクタと併用できます 適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます(今回はclassセレクタで)

cssファイル

input.hoge:focus {/* input要素にhogeとゆうclassセレクタ名をつけました */
   background-color: #F0FFF0; /* 背景色を変更 */
   border: 1px solid #FFE4C4; /* 枠線のスタイルを変更 */
   padding:5px;               /* 内側のスペースを少し空ける */
}

html部分

<input.hoge type="text" size="12" name="sample1" value="input要素">

実際の表示

ie6、ie7以外のブラウザでクリックしてください



(C)2012 ホームページ作成無料