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があたり色が変更されます。

↓参考サイトはこちら

 ブログの設置  1 user

Selectタグの最初の項目だけ色を変える方法【2つの方法を紹介】

https://flex-box.net/select/

こんにちは！のせっちです。 ワードプレスコーディングを主に行なっております。 今回は、Selectタグの最初の…

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

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

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