SIMコンタクトフォーム７のプルダウンメニュー（セレクトボックス）にお好みの矢印を表示させる方法を紹介します。
目次
表示見本｜CodePen
カスタマイズ前後の表示とコード見本は下記CodePenを参照ください。
See the Pen Untitled by s sim (@s-sim) on CodePen.
HTMLの記述法
Contact Form7で「ドロップダウンメニュー」を挿入することで下記のような挿入されるショートコードに対して…
[select* item first_as_label "選択して下さい" "赤" "青" "白" "黄" "緑"]下記のように、divタグで囲い込みます。
<div class="dropdown-menu_wrapper">
[select* item first_as_label "選択して下さい" "赤" "青" "白" "黄" "緑"]
</div>カスタマイズされた矢印はこのdivタグ（class=”dropdwown-menu_wrapper”）に対し、CSSで疑似要素で書きます。
CSSの記述法
下の例では下向きの矢印を擬似要素で書いていますが、画像として読み込むのもOKです。
//疑似要素の親となる要素に設定
.dropdwown-menu_wrapper{
position: relative;
}
//疑似要素で矢印を自由に書く（画像で読み込んでも良い）
.dropdwown-menu_wrapper::after{
content: "";
position: absolute;
display: inline-block;
border-top: 1.5px solid #333333;
border-right: 1.5px solid #333333;
height: 12px;
width: 12px;
top: 20px;
right: 50px;
transform: rotate(135deg);
pointer-events: none; //これを入れないとこのエリアをクリックしてもプルダウンされない
}
//デフォルト状態の矢印を消すための設定
.wpcf7-form-control {
appearance: none;
}疑似要素の使い方は下記の記事を参照して下さい。
SIMS-CODE
【CSSの疑似要素】::beforeと::afterの使い方【テンプレート解説】 | SIMS-CODE
CSSの疑似要素の::beforeと::afterの使い方をテンプレートを使って解説。コピペで利用できます。装飾の種類は次のとおりで、メニュー項目、リスト項目、見出しなどです。
２つほど重要な点を補足しておきます。
重要事項１
1つ目の重要事項は、疑似要素には必ず下記のプロパティを書いて下さい。
.dropdwown-menu_wrapper::after{
pointer-events: none; //これを入れないとこのエリアをクリックしてもプルダウンされない
//他のプロパティは解説のため省略していますので、全文は上のコードを参照してください。
}このプロパティを書かないと、矢印部分をクリックしてもメニューがプルダウンされなくなります。
重要事項２
2つ目の重要事項は、冒頭でも書いたContact Form7（セレクトボックス）初期状態の矢印の消去についてです。下記のCSSを記述するだけで、初期状態のセレクトボックスの矢印を消すことができます。
// Contact Form7のドロップダウンメニューの初期状態の矢印を消すCSS
.wpcf7-form-control {
appearance: none;
}
