英文:
How do I use HTML and CSS to get this type of styling in my drop down menu
问题
以下是已翻译的内容：
My current drop down looks like this
[![My dropdown's current style][1]][1]
How do I use HTML and CSS in a local style to get this type of styling in the attached image in my drop-down menu
[![Sample drop down style desired][2]][2]
See my code below
<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>
如有需要，您可以根据需要使用HTML和CSS在本地样式中实现附带图像中所示的下拉菜单样式。
英文:
My current drop down looks like this
How do I use HTML and CSS in a local style to get this type of styling in the attached image in my drop-down menu
See my code below
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
select:active,
select:hover {
outline-color: red;
background-color: red;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 4
无法样式化 HTML 的 select 和 option 标签，但是你可以使用 JavaScript 库，比如这个。它们可以创建相同的效果，但是使用其他 HTML 标签，因此你可以按照你的需求进行样式化。还可以查看这个问题，了解更多关于你的问题的背景信息。
英文:
It is not possible to style HTML select, option tags, however, you can you JS libraries, like this one. They create the same result, but from other HTML tags, so you can style it as you want. Also check this question for some more context about your problem.
答案2
得分: 1
据我所知，标准的 select 和 option 标签的样式通常不足够。要实现这一点，您需要使用第三方工具，如JS库。有一个很棒的库 - Material UI。https://mui.com/
英文:
As far as I know, standard styling of select , option tags is not enough. To do this, you need to use third-party tools, such as JS - libraries. There is a cool library - material UI. https://mui.com/
答案3
得分: 1
自定义下拉菜单在网页开发中很常见。正如Dave所说，原生HTML选择框不允许样式化选项标签。这是一个使用自己的div元素、CSS和jQuery创建自定义下拉菜单的好资源：https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
英文:
A custom dropdown is a common thing in web development. As Dave stated, the native HTML select doesn't allow styling of option tags. Here is a good resource for custom dropdowns using your own divs with css and jquery: https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论