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をリセットしてる場合、クリック時の装飾を忘れがちです。
ユーザビリティを考慮して本記事を参考にクリック時の装飾もした方がいいです。
以上で解説を終わります。
目次
