かなりマニアックな話じゃないかと思われるかも知れませんが、枠線の色変更も背景色の変更も実務でありました（背景色はtransitionでじんわり変化させる効果付きで）
今回はいろいろなタイプの枠線なども解説していきます。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
お問い合わせフォーム入力欄（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で角を丸くすることは出来ないのでご注意下さい。
まとめ
今回はお問い合わせフォーム入力欄（inputタグ）選択後の枠線や背景色を変える方法を解説しました。
冒頭でも書いた通り、マニアックと思われるかも知れませんが実務で実装したことがあるので、こういう実装もあると頭の片隅に置いておきましょう。
以上になります。
