CSS Web制作 コーディング お問い合わせフォーム

【CSS】お問い合わせフォーム入力欄の枠線や背景色を変える方法

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

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

お問い合わせフォームの枠線や背景色を変える方法

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

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

最初から変えるのであれば 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という擬似クラスが付いています。

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

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

それではここで色々な例を見てみましょう(コードを見るには左上のHTML、CSSをクリックして下さい)

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

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

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

 

transitionと使ってじんわり変化させる

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

See the Pen
お問い合わせフォームの枠線&背景色変更(アニメーション)
by junpei (@junpei-sugiyama)
on CodePen.


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

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

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

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

以上です。

-CSS, Web制作, コーディング, お問い合わせフォーム