Web制作 CSS

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

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

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

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

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

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


お問い合わせフォーム入力欄(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角を丸くすることは出来ないのでご注意下さい。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS
-