Written by Kasumi

input:text要素をクリックした時の枠線をCSSで変更する方法

検索ボックスのinputタグクリック時、枠線の色を変更するにはどうすればいいの?

本記事ではこのような疑問を解決、実装方法を解説します。

実装サンプル

See the Pen
input要素クリック時の枠線色変更
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

検索ボックスをクリックすると枠線の色がグリーンに装飾されてるのがわかります。
(デフォルトはブルー)

実装手順は以下の通りです。

input要素クリック時、枠線を変更するCSS

input:focus {
   outline:green 2px solid;
}

クリック時の枠線を変更するには任意のinput要素に擬似要素の:focusを使い、CSSをあてます。

input:focusにoutlineプロパティを指定、枠線の色・太さ・ボーダーの種類を値に入れます。

以上で実装完了です。

まとめ

input要素のデフォルトCSSをリセットしてる場合、クリック時の装飾を忘れがちです。

ユーザビリティを考慮して本記事を参考にクリック時の装飾もした方がいいです。

以上で解説を終わります。

目次

関連記事

HTMLCSS

スマホを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法

2023.02.06
210
HTMLCSS プログラミング

CSSのnth-childを使い、子要素の最初、最後、偶数奇数、何番目以降を指定する方法

更新日:2020.06.11
479
HTMLCSS

flexboxで比率を維持したままレスポンシブに拡大縮小可能な横並びレイアウトを作ってみよう

更新日:2019.11.28
2013
HTMLCSS プログラミング

CSSを使って役物文字の間を詰める方法【font-feature-settingsを使おう】

2021.03.26
1670