为啥我们不能使用 CSS 设置下拉菜单的样式？ [复制]

Posted 2023-03-05

【中文标题】为啥我们不能使用 CSS 设置下拉菜单的样式？ [复制]

【英文标题】：Why we can't style option of dropdown using CSS? [duplicate]为什么我们不能使用 CSS 设置下拉菜单的样式？ [复制]

【发布时间】：2017-09-10 09:32:31

【问题描述】：

在 Css 中，我们通常可以设置所有元素的样式，但我注意到我们无法使用 CSS 设置选择的 option 元素的样式。据我所知，Option 是select 的子元素，那么它不允许您设置该元素的样式的可能原因是什么？

我已经在 *** 上提出了各种答案，指出 您只是无法设置样式选项。 但我想知道其背后的确切原因。

我已经引用了this link，它说选项标签是由操作系统呈现的，而不是由 html 呈现的。如果是这样，那么为什么我们需要指定 option ？为什么它不自动呈现选项。

Here 是另一个链接，它显示了如何设置 Select 标签的样式。但我想知道为什么我们不能设置option 的样式？我不想知道如何使用 CSS 设置 select 标签的样式。

【问题讨论】：

Chiraj，你真的检查过这个已经回答的问题的答案吗？有大量的问题和参考资料我们无法设置 option 的样式以及原因。

@DeepakYadav 我不想知道如何设计它。我想知道为什么我们不能设计它。

@DeepakYadav 是的，我做到了。但是甚至没有一个令人满意的答案，因为每个人都说它是由操作系统渲染的。我想知道详细的答案。

@DeepakYadav 我已经在我的帖子中说明了这个问题，我也说过它是说该选项是由操作系统呈现的。但我想要详细的答案。我对那个单一的陈述不满意。为什么它是由操作系统渲染的，这背后的原因是什么。？所以请不要误会我的意思。我已经把所有这些问题都提出来了。

【参考方案1】：

您无法设置 option 元素的样式，因为它是由操作系统呈现的，而不是 HTML。这就是为什么它不能通过 CSS 设置样式的原因。

您当然可以使用一些插件，将select 替换为可以设置样式的常规 HTML 元素。

【讨论】：

问题本身已经给出了答案。作者说他想深入挖掘。

@RobertKusznier 我在编辑原始问题之前提供了这个答案（您可以通过比较时间戳来检查）。由于我没有收到此类更新的通知，因此我从未见过更新的问题。根据您无法设置样式的原因：浏览器决定如何处理它，就是这样。这就是它的实现方式。你应该问问浏览器的开发者为什么会这样。

【参考方案2】：

有一个重复的方法...它正确的下拉列表不接受样式，因此您可以制作看起来像下拉列表的东西并为那个东西赋予样式.. 这是此解释检查Answer7的链接

css style on select option