更改选择菜单项的样式（CSS）[重复]

Posted 2023-02-21

【中文标题】更改选择菜单项的样式（CSS）[重复]

【英文标题】：Change style of selectmenu items (CSS) [duplicate]

【发布时间】：2018-09-17 21:22:59

【问题描述】：

我有选择。我有一些东西。

我需要改变它的风格

这里是这个选择的 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;

一切都很好

这是截图

我的问题可能在哪里？

【问题讨论】：

你可以——不——关闭<select></select>。

我关闭了它。更新了我的帖子@AjAX。

你想把它放在</li>之前。

无论如何都不起作用@AjAX。

“但它不起作用，我的问题可能在哪里？” - 第一个问题是你没有给我们正确的问题描述 - 所以请阅读@ 987654322@。描述究竟是什么“不起作用”。其次，如果这是关于边框及其半径等特定样式的 - 浏览器不允许您将任何类型的样式应用于本机输入字段，那么您可以使用它们做的事情非常有限。如果您之前对该主题的研究没有发现那个信息，那么我质疑您是否真的做过任何事情 - 这是一个已经被广泛讨论的主题。

【参考方案1】：

您不能设置option 字段的样式。因为它有跨浏览器的问题。您可以使用Select2 代替。

【讨论】：

我编辑了问题

【参考方案2】：

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

【讨论】：

我编辑了问题