select（セレクトボックス）で初期値の色を変える方法【jQuery】

2024/04/012024/04/03

セレクトボックスの初期値の色をテキストボックスのプレスフォルダーみたいに薄い色にしたい…

この記事では以下のようなセレクタの実装方法を解説します。

See the Pen selecter by 伊とう (@ito-the-typescripter) on CodePen.

CSSのみで実現できる方法もありますが、jQueryを使う本方法がおすすめです。
CSSのみだと使用するのに条件（required属性の設定が必須）があります。

他サイトに記載の内容だとセレクタが複数あるとき正しく動作しない場合があるので注意して下さい。
（私はそれで数時間溶かしました…。）

この記事の著者

web制作エンジニア

伊藤義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

select（セレクトボックス）で初期値の色を変える方法

色を変える考え方は以下の通りです。

色を変えたい初期値はvalue=""とする
selectの初期の状態は、クラス名.select-emptyを付ける
selectの値が変わるときをトリガーに、value=""以外なら.select-emptyを外す
value=""なら.select-emptyを付ける

ソースコード

次にソースコードです。

<div class="form__item">
  <label for="selecter" class="form__ttl">セレクタ1</label><!-- /.form__ttl -->
  <div class="select-wrap">
    <select name="select" id="selecter" class="select-box select-empty">
      <option value="">選択して下さい</option>
      <option value="1">選択肢1</option>
      <option value="2">選択肢2</option>
      <option value="3">選択肢3</option>
    </select><!-- /# -->
  </div><!-- /.select-wrap -->
</div><!-- /.form__item -->

Contact Form7用には、以下に書き換え。

[select dropdownmenu-1 first_as_label"ここに好きな名前" "選択肢1" "選択肢2" "選択肢3"]

.select-box{
  color: #333;
}

//初期値の色
.select-empty { 
  color: #b3b3b3;
}

$(function() {
  const Target = $('.select-empty');
  $(Target).on('change', function () {
    if ($(this).val() !== "") { //ここが重要!!
      $(this).removeClass('select-empty');
    } else {
      $(this).addClass('select-empty');
    }
  });
});

JavaScriptの4行目は特に注意して下さい。
このプログラムにすることで複数のセレクタがある場合でも正しく動作することができます。

まとめ

select（セレクト）を使うことは多くないかもしれませんが、お問い合わせフォームなどがある場合は使用確率が高いアイテムです。

私みたいに時間を浪費せず実装してもらえることを願っています！

select（セレクトボックス）で初期値の色を変える方法【jQuery】

select（セレクトボックス）で初期値の色を変える方法

ソースコード

まとめ

関連記事