selectのoptionで、選択したときに色を付ける方法

こんにちは！大変お久しぶりでございます。
Giraffics Worksのクリエイティブディレクターのきりんと申します。
現在、Web講師もさせていただいております。

覚書も含めて投稿です。

メールフォームを作るときに使う、selectを使ったドロップダウンボックスですが、これに色をつけたい。と生徒さんから相談がありました。

<select id="mySelect">
  <option value="">選択して下さい</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

このようなselectがあった場合、初期値の色を変えるという方法は、よく紹介されていたのですが、

初期値「選択してください」の色は灰色。
選択後は色を変更したい。

というお悩みでした。
selectといったフォーム系のコードは、どうしてもシステムに依存しているため、デザインの変更がcssだけでは完結できません。
optionの背景に色と、文字色の変更はcssで変更可能ですが、Macで反映してない気がするんですよね…。

ということで、こんなときどう変更するか、と言ったら、もうjavascript先生にお頼み申すしかありませんでした。

ただ、色をただ乗せるだけでは効果がなく…

//Macではうまく反映されなかったコード
$(document).ready(function(){
  $('#mySelect').change(function(){
    // すべてのoption要素のスタイルをリセット
    $(this).find('option').css('color', 'black');
    
    // 選択されたoptionの文字色を変更
    $(this).find('option:selected').css('color', 'red');
  });
});

これはだめなやつでした。
そもそも、初めも後も色が変わらなかったんです。

そこで、jQueryのウィジェットに目をつけました。
「data-display」です。

<select id="mySelect">
  <option data-display="選択してください" value="">選択してください</option>
  <option data-display="オプション1" value="1">オプション1</option>
  <option data-display="オプション2" value="2">オプション2</option>
</select>

optionに、data-displayを設定し、そこで判別して色を変えます。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('mySelect').addEventListener('change', function() {
        var selectedOption = this.options[this.selectedIndex];
        var displayText = selectedOption.getAttribute('data-display');
        
        if (displayText === '選択してください') {
            // data-displayが選択してくださいのとき灰色
            this.style.color = 'grey';
        } else {
            // その他の色は赤色
            this.style.color = 'red';
        }
    });
});

選択されたoptionのdata-displayの属性を確認して、それに応じて色の変更をします。

うまく動きましたので、覚書でした。
他にもやり方いろいろあるんだろうな〜…。
もっと良いやり方等ありましたら、追記します。
また時間できたらこのページもサンプルページとか作りたいなって考えてます。