CSSセレクター

フォーカスのあるコントロール、要素のスタイルを設定する - フォーカス疑似クラスの利用

書式

:focus{
  (スタイルの記述)
}

要素やクラスやIDを指定して記述する場合は以下の記述となります。

特定のタグに関して設定する場合

(タグ名):focus{
  (スタイルの記述)
}

特定のクラスに関して設定する場合

.(クラス名):focus{
  (スタイルの記述)
}

特定のIDに関して設定する場合

#(ID名):focus{
  (スタイルの記述)
}

例

コード

下記のコードを記述します。

FocusSelector.css

input {
  background-color:#D0D0D0;
}

input:focus {
  background-color:#FFD0D0;
}

FocusSelector.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ForcusSelector.css" />
</head>
<body>
    入力1 : <input type="text" /><br />
    入力2 : <input type="text" /><br />
    入力3 : <input type="text" /><br />
    入力4 : <input type="text" /><br />
    入力5 : <input type="text" /><br />
</body>
</html>

解説

inputを記述していますのでINPUTタグに対してのスタイル定義となります。通常のINPUTの定義は以下のコードとなり、背景色を灰色(#D0D0D0)に指定します。

input {
  background-color:#D0D0D0;
}

フォーカスを受け取りアクティブになった状態でのスタイル定義が以下のコードであり、背景色をピンク(#FFD0D0)に指定しています。

input:focus {
  background-color:#FFD0D0;
}

表示結果

上記のHTMLをWebブラウザで表示します。下図の画面が表示されます。
フォーカスのあるコントロール、要素のスタイルを設定する - フォーカス疑似クラスの利用:画像1

テキストボックスをクリックし入力状態にすると、テキストボックスの背景色がピンクに変わります。

このページのキーワード

フォーカスのあるコントロール、要素のスタイルを指定する - フォーカス疑似クラスの利用
フォーカスのあるコントロール、要素のスタイルを適用する - フォーカス疑似クラスの利用

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。最近は生成AIの画像生成の沼に沈んでいる。

作成日: 2013-01-11

目次