Мне интересно, что может заставить мой css использовать только CERTAIN аспекты в моем коде, а не другие в отношении выпадающего меню select/option.

Здесь код, который должен быть загружен:

<style>
.dis {
  color: rgb(255,196,0);
  font-size: 20px!important;
  font-weight: bold!important;  
}
</style>

Для параметров в отключенном элементе я хотел бы установить цвет, размер шрифта и размер шрифта. Однако, как вы можете видеть на скриншоте ниже, выбирается только цветовая опция.

.dis{} вызывается, потому что rgb(255,196,0) подбирается, а параметры font-size font-weight и font-weight не пересекаются в консоли разработчика Chrome, но они фактически ничего не делают. Что я здесь делаю неправильно?

Обновить

HTML:

<div class="btn-group">  
  <select class="btn btn-primary" onClick="note()" onChange="select(this.value)">
  <option value="" disabled selected>Filter</option>                                                       
  <?php                              
  foreach ($output as $sName => $o) {

    $ucName = strtoupper($sName);    
    print "<option class=\"dis\" value=\"\" disabled>$sName</option>";

    foreach ($o as $p) {          
      print "<option>$p</option>";
    }
  }                                

  ?>                                     
  </select>
<br>
</div>

Не дубликат, поскольку я строго искал стиль использования CSS, а не Javascript, хотя да, вы можете форматировать и Javascript.