更改选择菜单项（CSS）的样式

Question

我有选择。我，我有一些项目。

我需要改变它的风格

这是此选择的HTML

 <ul class="facilities hide-small">
     <li class="airline">
         <select name="search[airline]" id="search_airline" class="custom">
            <option value="">Alla</option>
            <option value="SK">SAS</option>
            <option value="DY">Norwegian</option>
            <option value="EI">Aer Lingus</option>
            <option value="SU">Aeroflot</option>
            <option value="AR">Aerolineas Argentinas</option>
            <option value="AM">Aeromexico</option>
            <option value="BT">Air Baltic</option>
            <option value="AC">Air Canada</option>
            <option value="CA">Air China</option>
            <option value="UX">Air Europa</option>
            <option value="AF">Air France</option>
            <option value="AI">Air India</option>
            <option value="NZ">Air New Zealand</option>
</select>
            </li>

我需要更改选项的样式，所以我在css中写了这个。

#search_airline.ui-menu-item-wrapper{
  background: #e4e4e4;
  color: #2311b2;
  font-size: 14px;
    border: 1px solid #b9b9b9;
    border-radius: 0px 0px 3px 3px;
    font-family: 'Roboto Condensed', sans-serif;
}

但它不起作用

如果我这样写的

.ui-menu-item-wrapper{
  background: #e4e4e4;
  color: #2311b2;
  font-size: 14px;
    border: 1px solid #b9b9b9;
    border-radius: 0px 0px 3px 3px;
    font-family: 'Roboto Condensed', sans-serif;
}

一切都很棒

这是截图

我的问题在哪里？

Answer 1

您无法通过css更改<option>的样式，因为它是由用户的操作系统呈现而非HTML。

Answer 2

您无法设置option字段的样式。因为它有跨浏览器问题。而不是你可以使用Select2。