コーディング

Contact Form7 セレクトボックスのカスタマイズ

  • このエントリーをはてなブックマークに追加

こんにちは、くしだです。

Contact Form7でフォームを作る際に、デフォルトのままだと見栄えがよくないのでカスタマイズするのですが、難しい部分も多いので備忘録として記しておきます。

今回はセレクトボックスをカスタマイズしてみました。

矢印をカスタマイズ

See the Pen
Contact Form7 select–process
by kushi (@kushi95)
on CodePen.

まずデフォルトの矢印が邪魔なので、appearance: none;で消します。

そして疑似要素で矢印を作ります。

  • &::after {
  •  content: “”;
  •  display: block;
  •  width: 0;
  •  height: 0;
  •  border-style: solid;
  •  border-width: 10px 6px 0 6px;
  •  border-color: #000 transparent transparent transparent;
  •  position: absolute;
  •  top: 20px;
  •  right: 20px;
  •  pointer-events: none;
  • }

 

この際、pointer-events: none;を記述しないと矢印の部分だけ反応しないのでご注意ください。

 

初期値の色のみ変更

See the Pen
Contact Form7 select
by kushi (@kushi95)
on CodePen.

今回はわかりやすいように赤色に変えております。

jQueryを用いて、value属性が空のときにクラスis-emptyがあたり色が変更されます。

↓参考サイトはこちら

 

このままだとドロップダウンメニューの項目が全て赤色になってしまうので、2番目以降の項目の色を指定します。

  • option {
  •  &:first-child {
  •   color: red;
  •  }
  •  &:nth-child(n + 2) {
  •   color: #000;
  •  }
  • }

 

これでセレクトボックスでもプレースホルダーのような仕上がりになりました。

  • このエントリーをはてなブックマークに追加