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のみ版両方記載しています。
実際に、選択肢を選んでみてください。

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

簡単に解説

解説に入ります。
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

:invalid は CSS の擬似クラスで、 input 要素や form 要素のうち内容が検証に失敗したものを表します。

developer.mozilla.org

まとめ

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

お疲れ様でした！