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

CSS

2014.03.27

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

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

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

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

input:focus,

textarea:focus {

background-color:#fff8dc;

}

以下にフォームのサンプルを用意しました。

マウスでクリック（フォーカス）すると、背景色が#fff8dcに変わるかと思います。