英文:
Edit style for :selected option shown in select box
问题
我还没有找到关于样式化<select>标签内选定选项的解决方案。
示例：
<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>
我试图仅将“Edit status”选项的font-style更改为italic。
问题在于当我将'italic'应用于<select>标签时，它会应用于所有选项。 选择标签
仅将italic添加到此选项根本不起作用。
也许可以使用jQuery来实现吗？
英文:
I have not found a solution for styling the selected option inside a <select> tag.
Example:
<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>
I'm trying to change the font-style to italic only for "Edit status" option.
The problem is that when I apply 'italic' to the <select> tag, it applies it for all options. Select tag
Adding italic just to this option does not work at all.
Maybe it's possible using jQuery?
答案1
得分: 0
Short Answer:
我不太精通jQuery，也许有人可以帮助你，但简短的答案是无法直接样式化选择框的选项。
Long(er) Answer:
<option> 元素的样式由操作系统而不是浏览器来控制，因此你不能嵌套其他元素或对其进行样式设置。Mozilla Web 文档 中提到：
如果你确实需要完全控制选项的样式，你要么需要使用某种库来生成自定义控件，要么构建自己的自定义控件...
参考这个和这个以获取类似问题的解答，以及这个以获取高级样式提示；也许你可以找到选择其他替代方案，或者使用CSS来设计自己的下拉菜单。
希望对你有所帮助。
英文:
Short Answer:
I am not well versed in jQuery, perhaps someone can help you there, but the short answer is there is no way of styling select options.
Long(er) Answer:
<option> elements are styled by your OS -not the browser- so you cannot nest other elements or style them. The Mozilla Web Docs state:
> If you really need full control over the option styling, you'll have to either use some kind of library to generate a custom control, or build your own custom control...
See this and this for other questions like this, and this for advanced style tips; maybe you can find an alternative to select, or design your own dropdown with CSS.
Hopefully that helps you out.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论