• CSS

CSSの疑似クラス「:focus」の使い方【focus-withinとの違い】

投稿日:2023年05月01日（最終更新日:2023年05月31日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

フォーカスとは？

フォーカスとは入力ボックスなどがクリックされて入力できる状態になっていることを指します。その後、別の場所をクリックしたり、他の入力ボックスにカーソルを移すことをフォーカスが外れると言います。

CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。

なお、ほとんどのブラウザではデフォルトCSSによりフォーカス時のスタイルが設定されています。

疑似要素・疑似クラスについて詳しくはこちらのページをご覧ください。

CSSの疑似要素・疑似クラスの種類と使い方

疑似要素・疑似クラスは、どちらも元となる（基準となる）要素に対して追加のスタイルを指定したり装飾を行うために使用するCSSのセレクタ―です。どちらもHTMLのソースコードには...【もっと読む】

フォーカスされた時や外れた時に入力チェックしたり、テキストを表示させたりといった処理を行いたい時はJavascript(jQuery)を用います。

jQueryのblur()メソッドについて詳しくはこちらのページをご覧ください。

jQueryのblur()でフォーカスが外れた時の処理を行う方法【入力チェックなど】

jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。入力チェックなどに利用され、...【もっと読む】

疑似クラス「:focus」の使い方

疑似クラス「:focus」はCSSのセレクターに利用することで、要素がフォーカスされた時のスタイルを設定することができます。

次のように記述します。

下の例では、テキストボックスがフォーカスされている時のみ文字色を変更するように指定しています。

<input type="text" id="testA" placeholder="入力欄A">

input[type="text"]#testA:focus{
    color:#d40000;
}

テキストボックスの枠線はoutlineプロパティで設定する

input[type='text']によるテキストボックスの枠線は一見するとborderプロパティのように思われますが、outlineプロパティによって表示されています。

設定の仕方はborderプロパティと同じで、線の種類・太さ・色を指定することができます。

下の例では、フォーカスされた時に枠線を赤く表示させています。

<input type="text" id="testB" placeholder="入力欄B">

input[type="text"]#testB:focus{
    outline:solid 2px #d40000;
}

「:focus-within」との違い

フォーカス時のスタイルを設定できる疑似クラスとして「:focus-within」があります。

「:focus」が要素自体がフォーカスされた時のスタイルであるのに対し、「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態に有効になる疑似クラスです。

親要素の「:focus-within」に設定したスタイルは、子要素のテキストボックスのどれかがフォーカスされた時に適用されます。

下記の例ではいずれかのテキストボックスにフォーカスすると、親要素の「:focus-within」のスタイルが有効になり背景色が変更されます。

<div class="sample_form">
    <input type="text" placeholder="入力欄A">
    <input type="text" placeholder="入力欄B">
    <input type="text" placeholder="入力欄C">
    <input type="text" placeholder="入力欄D">
</div>

.sample_form{
    background:#f9f9f9;
    padding:10px;
}
.sample_form:focus-within{
    background:#ff4d5f;
}

まとめ

以上がCSSの疑似クラス「:focus」の使い方です。

フォーカスされている部分をわかりやすく装飾できれば、入力フォームなどでのユーザビリティを高める効果が期待できます。focus-withinも合わせて使えばより効果的です。