フォームタグのselectの文字色を選択前と選択後で変える方法

フォームタグのselectの文字色を選択前と選択後で変える方法をお伝えします。 色を変えることで、閲覧者にとってわかりやすいフォームになるかと思います。

○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が文字色になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です