CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:focus疑似クラスの使い方を解説！入力フォームにフォーカス時のスタイルを適用する方法

CSSの:focus疑似クラスは、テキストボックスやリンクなどの要素がフォーカスを受け取った瞬間（クリックしたとき、またはTabキーで移動したとき）に、特定のスタイルを適用できるセレクタです。特にフォームの入力欄でよく使われ、ユーザーがどの項目を選択しているかを視覚的に分かりやすくする効果があります。

:focus疑似クラスとは？

:focus疑似クラスは、キーボード操作やマウスクリックによって要素がアクティブになった状態を検出し、そのタイミングで背景色や枠線などを変更できます。以下のサンプルコードでは、入力フィールドにフォーカスが当たると背景色がオレンジ色に変わるように設定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         input:focus {
            background-color: orange;
         }
      </style>
   </head>
   <body>
      <form action = "">
         科目： <input type = "text" name = "subject"><br>
         氏名： <input type = "text" name = "student"><br>
         年齢： <input type = "number" name = "age"><br>
         <input type = "submit" value = "送信">
      </form>
   </body>
</html>

実行結果

このコードを実行すると、3つの入力フィールドと送信ボタンが表示されたフォームが作成されます。いずれかの入力欄をクリックすると、そのフィールドの背景色がオレンジ色に変化し、現在編集中の項目がひと目でわかるようになります。

CSSの:focus疑似クラスの使い方を解説！入力フォームにフォーカス時のスタイルを適用する方法

応用ポイント

背景色だけでなく、borderやoutlineを組み合わせれば、より視認性の高いデザインにすることも可能です。また、アクセシビリティの観点からも、キーボード操作時にフォーカス位置が明確になるよう:focusスタイルを設定しておくことは重要です。

  1. CSSの疑似クラス（Pseudo Class）とは？基本の書き方と実用例をわかりやすく解説

    CSSの疑似クラス（Pseudo Class）は、要素の特別な状態を表現するための仕組みです。ドキュメント内の要素そのものだけでなく、「状態」「位置」「履歴」などといった外的な要素も捉えることができます。たとえば「マウスカーソルが乗っている要素」「すでに訪問済みのリンク」「入力値が有効なフォームフィールド」といった状態は、通常のCSSセレクターでは直接指定できません。こうした場合でも、疑似クラスを使えば柔軟にスタイルを適用できます。疑似クラスの基本構文疑似クラスは、セレクターの後ろにコロン（:）を付けて記述します。Selector:pseudo-class {   &nbs

  2. CSSでフォーカス時に入力フィールドをクリアする方法

    フォーカス時に入力フィールドをクリアするには入力フィールドにフォーカスが当たった瞬間に、既存の値を自動的にクリアしたいケースはよくあります。例えば、あらかじめデフォルトのテキストを表示しておき、ユーザーがフィールドをクリックした時点でその値を消去するといった使い方です。これを実現するには、HTMLのonfocus属性を使用し、フォーカスが当たったタイミングで入力値を空文字列に設定します。以下にコード例を示します。コード例<!DOCTYPE html> <html> <head> </head> <body> <h1>フォー