CSS Web制作

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

2020年12月31日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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

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

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

最初から変えるのであれば『inputタグ』や『selectタグ』にoutlinebackground-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タグ)選択後の枠線や背景色を変える方法を解説しました。

冒頭でも書いた通り、マニアックと思われるかも知れませんが実務で実装したことがあるので、こういう実装もあると頭の片隅に置いておきましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作
-