编辑样式：选择框中显示的选定选项答案

【问题标题】：Edit style for :selected option shown in select box编辑样式：选择框中显示的选定选项
【发布时间】：2023-02-08 23:09:29
【问题描述】：

在互联网上搜索了很多关于如何在 select 标签内设置 :selected 选项的样式，但尚未找到任何解决方案。基本上我有标签，有选项。

<select class="cursor-pointer min-w-[160px] custom-black rounded-sm border border-[#d6dce2] focus:outline-none focus:ring-0 focus:border-[#d6dce2] font-bold px-4 text-sm py-2.5">
                                                <option selected disabled hidden>Edit status</option>
                                                <option value="1">Status1</option>
                                                <option value="2">Status2</option>
                                                <option value="3">Status3</option>
                                                <option value="4">Status4</option>
                                            </select>

我只想将“字体样式”更改为“斜体”，仅用于“编辑状态”选项。

问题是，当我将“斜体”应用于标记时，它会将它应用于所有选项。Select tag 仅为此选项添加“斜体”根本不起作用。也许可以使用 Jquery？

【问题讨论】：

标签： html jquery css tailwind-css

【解决方案1】：

简短回答：

我不太精通 jQuery，也许有人可以帮助你，但简短的回答是没有办法设置选择选项的样式。

长（儿）答：

<option> 元素由您的操作系统设置样式 - 而不是浏览器 - 因此您不能嵌套其他元素或设置它们的样式。 Mozilla Web Docs 状态：

如果您真的需要完全控制选项样式，则必须使用某种库来生成自定义控件，或者构建您自己的自定义控件...

有关此类其他问题，请参阅this 和this，有关高级样式提示，请参阅this；也许您可以找到替代选择，或使用 CSS 的 design your own dropdown。

希望这能帮助你。

【讨论】：