【CSS】お問い合わせフォーム入力欄（inputタグ）選択後の枠線や背景色を変える方法

お問い合わせフォームの入力欄を選択したら枠線や背景色を変える方法ない？

かなりマニアックな話じゃないかと思われるかも知れませんが、枠線の色変更も背景色の変更も実務でありました（背景色はtransitionでじんわり変化させる効果付きで）

今回はいろいろなタイプの枠線なども解説していきます。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

累計1100部突破！レビュー570件！

お問い合わせフォーム入力欄（inputタグ）選択後の枠線や背景色を変える方法

お問い合わせフォームの入力欄の枠線や背景色を変えるというのはマニアックな話かと思うかも知れませんが『入力欄を選択後、背景色をサイトのテーマカラーにしたい』という依頼がありました。

これは最初から色を変えるのか、選択された時に色を変化させるのかで方法が異なります。

最初から変えるのであれば『inputタグ』や『selectタグ』にoutlineやbackground-colorで色を設定し、選択された時に色を変化させるのであれば擬似クラスである:focusを使って変化させます。

入力欄選択前から枠線や背景色を変更

まずは入力欄を選択しなくても、最初から色を変える方法です。

<input>

input {
  background-color: yellow;
  outline: 1px red solid;
}

これは背景色は黄色で、枠線は赤色にしています。

枠線は『太さ1px、色は赤、線の種類は実線』という順番で指定しています。

またinputタグだけでなく、selectタグやtextareaタグにも設定出来ます。

入力欄選択後に枠線や背景色を変更

次は入力欄を選択したら色を変更する方法ですが、HTMLは変わりませんがCSSが少し変わります。

input:focus {
  background-color: yellow;
  outline: 1px red solid;
}

inputのあとにfocusという擬似クラスが付いています。

名前からして分かると思いますが、フォーカス（選択）された時の動作となります。

なのでこの場合は入力欄を選択した時の色となり、選択される前の色はデフォルトとなります。

それではここで色々な例を見てみましょう。

See the Pen
お問い合わせフォームの枠線＆背景色変更 by junpei (@junpei-sugiyama)
on CodePen.

CSSはこちらになります。

/* 最初から枠線と背景色指定 */
.default {
  background-color: yellow;
  outline: 1px red solid;
}
/* 枠線の色変更（実線・赤色） */
.solid:focus {
  outline: 1px red solid;
}
/* 枠線の色変更（点線・青色） */
.dotted:focus {
  outline: 1px blue dotted;
}
/* 枠線の色変更（太線・点線・緑色） */
.dotted-bold:focus {
  outline: 5px green dotted;
}
/* 枠線と背景色の色変更（太線・破線・背景黄色） */
.double:focus {
  outline: 5px blue double;
}
/* 枠線の色変更（太線・二重線・青色） */
.bg:focus {
  background-color: yellow;
  outline: 5px green dashed;
}

ここでは枠線の種類は実線、点線、破線、二重線とありますが、他にもいくつかあります（ここでは全部は紹介していません）

このあたりの色をサイトのメインカラーにして欲しいという依頼はあると思います。

transitionを使って入力欄選択後に枠線や背景色をじんわり変化させる

ここまで枠線と背景色を変更させてきましたが、これにtransitionを使ってじんわりと変化させてみたいと思います。

See the Pen
お問い合わせフォームの枠線＆背景色変更（transition） by junpei (@junpei-sugiyama)
on CodePen.

CSSはこちらです。

/* 背景色の色変更（白から黄） */
.bg {
  background-color: #fff;
  transition: background-color 2s ease-out;
}
.bg:focus {
  background-color: yellow;
  transition: background-color 2s ease-out;
}
/* 枠線の色変更（青から赤） */
.solid {
  outline: 5px blue solid;
  transition: outline 2s ease-out;
}
.solid:focus {
  outline: 5px red solid;
  transition: outline 2s ease-out;
}

枠線をじんわり変化させるという事はあまりないかも知れませんが、背景色をじんわり変化させるのは実務でも使いました（ここまでゆっくりではありませんが）

注意点としては『選択前の色も設定しないと選択を解除した時にじんわりではなく瞬時に色が変わってしまう』という事（デフォルトが白でも白を指定しないといけない）

また、transitionは選択前の状態にも設定しないと瞬時に色が変わってしまいます。

あとoutlineで設定した枠線はborder-radiusで角を丸くすることは出来ないのでご注意下さい。