○HTML
<select name="お問い合せ項目(必須)"> <option value="" disabled="disabled" selected class="contact_not_selected">お問い合せ項目を選択してください。</option> <option value="お買い上げの商品について">お買い上げの商品について</option> <option value="お探しの商品について">お探しの商品について</option> <option value="その他">その他</option> </select>① 選択前のoptionに任意のクラス名(ここではcontact_not_selected)をつけます。
○JQuery
$(function(){ function selectColor() { // 現在選択されてる項目によって色設定 if($('select').find('option:selected').hasClass('contact_not_selected')) { $('select').css({'color': '#e6e6e6'}); } // 項目が変更された時、条件によって色変更 $('select').on('change', function(){ if($(this).find('option:selected').hasClass('contact_not_selected')) { $(this).css({'color': '#e6e6e6'}); } else { $(this).css({'color': '#000'}); } }); } selectColor(); });
② このように書くことで、①でつけたクラスがついているoptionを選んだ時は#e6e6e6が文字色になり、他のものを選んだ時は#000が文字色になります。