我当前的下拉列表如下所示

My dropdown's current style

如何在本地样式中使用HTML和CSS,以便在我的下拉菜单中的附加图像中获得此类型的样式

Sample drop down style desired

请参阅下面的代码

select:active,
select:hover {
  outline-color: red;
  background-color: red;
}
<select id="select">
  <option value="">All Categories</option>
  <option value="Aston Martin">Aston Martin</option>
  <option value="Audi">Audi</option>
  <option value="Bentley">Bentley</option>
  <option value="Genesis">Genesis</option>
  <option value="Volvo">Volvo</option>
  <option value="VW">VW</option>
</select>

推荐答案

这是不可能的样式HTMLselect, option标签,但是,你可以你的JS库,像this一.它们创建相同的结果,但来自其他HTML标签,因此您可以随心所欲地设置样式.此外,还可以查看this个问题,了解有关您的问题的更多上下文.

Html相关问答推荐

为什么html复选框总是具有只读属性?

将文本区域标签的内容着色为SON(带有 colored颜色 )

打印pdf时100 vh迪夫有半页高

D3.js—分组条形图—更新输入数据时出错

在Apps Script中连接CSS与HTML

如何修复与导航栏重叠的css网格?

Angular 15 p-对话框不使用组件 Select 器呈现HTML

MatSnackBar: colored颜色 不起作用

更改Angular 为17的material Select 字段的高度?

角化、剪裁、边缘,但仅在底部2和平滑包装上

使具有FLEX父项的溢出自动的子元素收缩

(HTML框架标签)点击后目标框架将不再工作

第 117 行的块标记无效:endblock,应为empty或endfor.您是否忘记注册或加载此标签?

需要帮助个性化我的 CSS 导航栏:如何在鼠标悬停时突出显示
  • 元素?
  • 将现有内容拆分为三列或部分

    Angular:从服务器下载 HTML 并打印

    XPATH Select h2标签和

    标签之间或h2标签和 标签之间的td元素,以立即为准

    我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列?

    flex-box 中的图像在 Chrome 和 Firefox 中看起来不同 - 如何使它们在 Firefox 中看起来像?

    SVG 适用于 Safari,不适用于 Chrome