selectでoption毎に色・文字サイズ変更した際、選択中のoptionにも反映させたい

##やりたいこと
selectで選択内容を記号で表示した際に、JavaScriptで
入力前・入力後それぞれ色と全体の記号のサイズをある程度統一したいです。

下記の内容と似たような質問となってしまうのですが、色とあわせて記号のサイズを調整したいです。
https://teratail.com/questions/98706

現状（参考にした質問がjQueryだったためjs部分はjQueryになっています。）
https://codepen.io/mnmds/pen/eYBvmqW

##解決したいこと
①▲だけ、他記号よりもサイズが大きいため、selectで選んだ後の文字の表示サイズを変更したい。
（選択中も記号のサイズを合わせたくて試したところ、選択中の表示はCSSで調節ができました。）

②初期値の-はフォントを小さくしたい。太字にしたくない。

select自体にfont-sizeを設定してしまっているため、文字サイズが大きくなってしまっているのだと思うのですが
②に関してはoptionの表示も太字・サイズが大きくなったままの理由が分かりません。
（試したところscale、font-sizeでの調節が効きませんでした。）

html
1        <select>
2         <option style="color:gray;">-</option>
3         <option style="color:red;">●</option>
4         <option style="color:orange;">×</option>
5         <option style="color:green;font-size:20px;">▲</option>
6        </select>

css
1      select {
2        font-size: 30px;
3      }
4      select option:nth-child(n+1):nth-child(-n+3) {
5        font-size: 30px;
6      }
7      select option:nth-child(4) {
8        font-size: 20px;
9      }

JavaScript
1（※参考にしたページのjQueryです。）
2      $(function(){
3        $('select').on('change',function(){
4          $(this).css('color',$(this).find('option:selected').get(0).style.color);
5        }).trigger('change');
6      });

ご教授いただけませんでしょうか。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('select').on('change',function(){
3    $(this).css({
4      'color':$(this).find('option:selected').get(0).style.color,
5      'font-size':$(this).find('option:selected').get(0).style.fontSize||"initial",
6      });
7  }).trigger('change');
8});