htmlのセレクトリストをfirefoxで選択したときに文字が見えない状態になる現象への対応

##現象
firefoxでhtmlのセレクトリストを選択したときに、文字が見えず真っ白な状態になりました（説明下手でごめんなさい）。
本来なら選択した後には自分が選択したテキストだけが見えるようになりますが、真っ白で自分が何を選択したのかわからないという状態です。
一度どこかをクリックすれば文字が見えるようになります。
ただ、値としてはそれが正しく選択されている状態になっているので問題はなかったのですが、できれば真っ白にならず選択したテキストがちゃんと表示されている状態にしたいと思い対応しました。

なぜこういうことになっているのかはわからないのですが、私が対応した方法を紹介します。

環境
firefox version 64.0.2
macOs Mojave version 10.14.2

##対応

catsList.html

<select id="list">
  <option class="cats" value="blackcat">Black Cat</option>
  <option class="cats" value="whitecat">White Cat</option>
  <option class="cats" value="calicocat">Calico Cat</option>
  <option class="cats" value="americanshorthair">American Shorthair</option>
  <option class="cats" value="russianblue">Russian Blue</option>
  <option class="cats" value="abyssinian">Abyssinian</option>
  <option class="cats" value="siamese">Siamese</option>
</select>

catsList.js

    $(document).on('change', "#list", function (e) {
    	$(this).css('color', '#000');
    });

ただ、セレクトリストが変更された時にテキストの色を黒くしているだけです。
私の環境ではこれでうまくいきました。

これにたどり着く前にいくつか試行錯誤して、全然わからない。。。状態になってふと思いついてやってみたらできました。

ネットで検索しても方法が見当たらなかったので（探し方が悪いのかも。。。）備忘録の意味も込めての投稿です。