样式 SELECT 选项下拉背景、宽度和字体答案

【问题标题】：Styling SELECT option dropdown background, width and font样式 SELECT 选项下拉背景、宽度和字体
【发布时间】：2023-04-01 14:50:02
【问题描述】：

我这里有个问题。

有一个带有一些选项的选择元素，我想知道是否可以更改下拉菜单的背景、宽度和字体。

示例标记为：

<form action="">
<span>Show</span>   
<select name="cars" id="indicator-filter-options">
    <option value="all" selected>Cars</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
</select>

我没有粘贴我的 css，因为它是使用变量在 SASS 中编写的。

是否可以实现与此处类似的背景和悬停效果：

The dropdown design I'm trying to achieve is HERE

【问题讨论】：

您需要为此添加一个 jquery 插件，这可能对您有所帮助select2.github.io/examples.html
谢谢，我要去看看这个。
你可以在小提琴上使用 sass 之类的东西，或者只是替换地方上的变量。
您看到的大多数这些输入，它们根本不使用选择标签。他们将 div 与 css 和 js 结合使用。如果您为此使用已经可用的库，那就更好了。

标签： html css forms select option

【解决方案1】：

除非您使用无序列表，否则您无法设置这样的下拉选项样式。下面的演示可能会给你一个想法。

<ul><li>Option One</li></ul>

View Demo

【讨论】：

谢谢，这是有道理的。我为此使用了 select2.github.io 以获得完整的解决方案。感谢您的回复，玛丽亚。