:focusとは
- ここで説明する:focus とは次の語句からなるCSSの疑似クラスです。
- focus
- 読み: フォーカス
意味: 焦点
:focus疑似クラスの概要
この疑似クラスはセレクタに該当する要素に焦点が当った時に適用され一時的なプロパティ値の変更を行います。
焦点が当るとは、その要素がアクティブになり、ユーザーが入力要素を操作できる状態なった時のことです。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:focus{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはinput要素text型です。 この要素に:focus疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 要素にフォーカスが当った時を検知する
ここではサンプルとしてテキストボックスがアクティブになった時(焦点が当った時)に文字を太く表示して、文字色も濃くなるようにしています。 要素にフォーカスを当てるには、ユーザーが入力要素をクリックするかプログラムから操作する、もしくは要素の autofocus属性 を利用する方法があります。
input[type="text"]{
font-weight: normal;
color: ##gray;
}
input[type="text"]:focus{
font-weight: bolder;
color: ##black;
}