【wp】contact-form7でselectboxのfirst_as_labelの項目だけplacehoderっぽく色を変える方法。

皆さん、こんにちは。

制作部の関です。

今回は「contact-form7でselectboxのfirst_as_labelの項目だけplacehoderっぽく色を変える方法」についてのお話をします。

【wp】contact-form7でselectboxのfirst_as_labelの項目だけplacehoderっぽく色を変える方法。

とあるサイトでselectボックスの一番上の項目が選択されたときは薄い文字色でそれ以外は濃い文字色で表現してほしいという依頼がございました。

要は一個目の選択肢をplacehoderっぽくしたいってことですね。

例えば以下のようなセレクトボックスがあるとします。

1. <div>[select* time class:placeholder first_as_label “時間を選択してください” “10:00” “11:00” “12:00” “13:00” “14:00” “15:00” “16:00” “17:00” “18:00” “19:00”]</div>

selectのcolorを変えると他の選択肢を選択した際も同様にcolorが変わってしまいます。。。

以下のようにoptionの選択肢の一番上の部分のみ色を変えてもプルダウンの時のみしか色が変わりません。。。

1. option:not(:first-child){
2. color:#999;
3. }

そこでjavascriptで一番上の選択肢が選択されたとき（first_as_labelの選択肢）、色をchangeメソッドで切り替えるコードを載せます。

1.   //時間の一個目をplaceholderっぽくする。デフォルトカラーは#999にしておく
2. $(function(){
3.     $(‘select.placeholder’).on(‘change’, function(){
4.         if($(this).val() == “”){//first_as_labelのvalueは空文字で出力される。
5.             $(this).css(‘color’,’#999′)
6.         } else {
7.             $(this).css(‘color’,’#000′)
8.         }
9.     });
10. });

1. #form select{
2.  color: #999;
3. }

これで一個目の項目が選択された時に色を変えることができました。

こちらの記事を参考にさせていただきました。↓

https://qiita.com/7note/items/7e1b3d29664de277d6b9

以上、制作部の関でした。