セレクトボックスにはプレースホルダーという概念がありません。なので、input[type=”text”]のように、未入力時だけ文字色をCSSで変更するといったことができません。

ですが、デザインではセレクトボックスの文字色も他のinputのプレースホルダーに合わせてあることがあります。そのようなデザインを支給されたことがあるので、意図を確認してみました。

セレクトボックスを選択した後もその文字色でよければいいのですが、デザイナーさんの意図としてはそうではなかったです。初期値は他のプレースホルダーと同じ文字色、選択時は他の入力時の色と同じ文字色にしてほしいということでした。

CSSのみでは実現が難しいので、JavaScriptを使って初期値と選択時の文字色を変えて対処しました。やり方を備忘録として残しておきたいと思います。

セレクトボックスの文字色を初期値と選択時で変更する方法

以下のようなJavaScriptを記述します。これで、未選択時は文字色が#aaaに、選択時は#000に変わるようになります。

<script>
  (function () {
    document.addEventListener('DOMContentLoaded', function () {
      function changeColor(select) {
        if (select.value == 0) {
          select.style.color = '#aaa'; //プレースホルダー色
        } else {
          select.style.color = '#000'; //通常の文字色
        }
      }

      document.querySelectorAll('select').forEach(function (select) {
        changeColor(select);
        select.addEventListener('change', function () {
          changeColor(this);
        });
      });
    });
  })();
</script>

↑未選択時のセレクトボックス

↑選択時のセレクトボックス

加えて、optionに通常の文字色を指定しておきます。でないと、未選択時にセレクトボックスを展開すると、選択肢の文字色が#aaaになってしまいます。

option {
  color: #000;
}

あとがき

比べるとわかりますが、デフォルトで入る矢印のアイコンも色が変わってしまうので、そこは調整が必要ですね。CSSでオリジナルのアイコンを背景画像として指定すれば解決します。

初期値と選択時でセレクトボックスの文字色を変えたい時は、参考にしていただければ幸いです。