样式 SELECT 选项下拉菜单背景、宽度和字体

Question

我这里有问题。

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

示例标记为：

<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

Answer 1

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

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

View Demo

样式 SELECT 选项下拉菜单背景、宽度和字体

Styling SELECT option dropdown background, width and font

html

css

forms

select

option