Selectタグの最初の項目だけ色を変える方法【2つの方法を紹介】

こんにちは!のせっち@nosecchi01です。

ワードプレスコーディングを主に行なっております。

今回は、Selectタグの最初の項目だけ色を変える方法のご紹介です。
JS(jQuery)を使う方法と、CSSのみで行う方法の2種類です。

最初の項目は「選択してください」とか「—」とかinputタグや、selectタグでいうplaceholder的な役割を持たせたいですよね。

ただし、selectタグにはplaceholderはなく、first-child的な指定もできないため、どうやって色を変えればいいのか?をご紹介します。

それではいってみましょう!

ということで、早速目標物を確認

早速codepenで見ていきます。
やり方を知れば簡単です。

See the Pen Change color of select tag by Yuki Nose (@yukinouz1) on CodePen.

jQuery版、CSSのみ版両方記載しています。
実際に、選択肢を選んでみてください。

  • 「選択してください」を選んだときには灰色(#757575)
  • それ以外の選択肢を選んだ場合は、黒(#191919)

上記のようになっているはずです。

簡単に解説

解説に入ります。
jQueryは初心者向けにかなり丁寧に解説しますので、「そんなの知っているよ!」という方にはクドくてすみませんm(_ _)m

jQueryを使う方法

jQuery部分抜粋して解説していきます。

// <select class="is-empty"></select>としておく
jQuery(function($){
  const Target = $('.is-empty');
  $(Target).on('change', function(){
    if ($(Target).val() !== ""){
      $(this).removeClass('is-empty');
    } else {
      $(this).addClass('is-empty');
    }
  });
});

<select>タグに”is-empty”クラスをつけておきます。

const Target = $('.is-empty'); // Targetに代入

何回も使うので、Targetを定義してそこにis-emptyを代入しておきます。

$(Target).on('change', function(){
   // 省略
});

on changeで、値の変更を監視します。選択肢を選ぶ度に処理を行うということですね。

if ($(Target).val() !== ""){ // value=""でなければ、
    $(this).removeClass('is-empty'); // クラスを外す
  } else {
    $(this).addClass('is-empty'); // クラスを付ける
  }

「選択してください」のvalue属性は空(value=””)ですので、空かどうかで条件分岐させます。

$(this)はこの場合はTargetを指します。

CSSのみで処理する方法

<select required> <!-- requiredを付ける -->
  <option value="" selected>選択してください</option>
   // 省略
</select>

selectタグをrequiredとします。
required属性をつけると必須項目になります。何も選択されていない状態でフォーム送信しようとすると、ブラウザ側でエラーメッセージを出してくれます。(ブラウザによって表示のされ方は違う)

select:invalid {
  color: #757575;
}

擬似要素:invalidは必須項目なのに、値が入ってない場合を判定します。
selectタグの最初の要素は、value=””でrequired(必須項目)を満たしていないため、このCSSが適用されるということですね!

当然ながら、requiredとセットでないと動きませんので、必須項目にしか使えません。

まとめ

  • 必須項目なら擬似要素:invalidを使うと楽チンです。
  • 必須項目でない場合はJSを使いましょう!

お疲れ様でした!

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
現在は、主にバンコクでWeb制作、物販を中心に生きています。