[CSS]フォームにフォーカスした時の背景色を変更する方法｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[CSS]フォームにフォーカスした時の背景色を変更する方法

スポンサード

テキストフォームやテキストエリアなどの要素がマウスでクリックされた（:focus）際に、CSSで指定した背景色に変更する方法のご紹介です。

フォーカス時のフォーム要素の背景色を変更する

inputやextareaなどタグについては、CSSで以下のようにfocus:の時の背景色を指定します。

input:focus,
textarea:focus {
	background-color:#fff8dc;
	}

1

2

3

4

input:focus,

textarea:focus {

background-color:#fff8dc;

}

以下にフォームのサンプルを用意しました。
マウスでクリック（フォーカス）すると、背景色が#fff8dcに変わるかと思います。

スポンサード

コメント

コメントを残すコメントをキャンセル