selectタグの選択項目によって色を変える機会があったのでメモ。

1. デモ
2. HTML
3. CSS
4. jQuery

デモ

未選択の場合は色が薄いで薄いですが、何か選択されていると色が濃くなります。

プロフィールなどで、ちゃんと項目が埋められてるかユーザーに気づかせるのによさそうです。

See the Pen select color by misumi (@mismith0227) on CodePen.

HTML

selectタグを用意し、未選択状態のoptionにclassをつけておきます。

<select>
  <option class="not-select">未選択</option>
  <option>北海道</option>
  <option>東京</option>
  <option>大阪</option>
  <option>福岡</option>
</select>

CSS

CSSではoptionにデフォルトの色設定をしておきます。

option {
  color: #333;
}

これがないと選択時のoptionの色が全て変わってしまいます。
スマホでは関係ないですが。

jQuery

実際の色変更はjQueryでやります。

function selectColor() {
  // 現在選択されてる項目によって色設定
  if($('select').find('option:selected').hasClass('not-select')) {
    $('select').css({'color': '#ccc'});
  }
　 // 項目が変更された時、条件によって色変更
  $('select').on('change', function(){
    if($(this).find('option:selected').hasClass('not-select')) {
      $(this).css({'color': '#ccc'});
    } else {
      $(this).css({'color': '#333'});
    }
  });
}
selectColor();

最後に

ちょっとした記述ですが、以外と使えるかもです。