我试图更改选定型式杆的选项的各个样式，并使角落四舍五入，但可以吗？
我正在使用tailwind进行风格，但不确定如何在CSS中更改它，要么选择选择，
<select class="h-8 w-24 bg-neutral-900 cursor-pointer inline-flex align-middle p-1 m-4 font-bold text-neutral-400 hover:text-red-800 active:text-red-900 focus:text-red-800 transition ease-in-out duration-300 carret-black">
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
我无法通过将类添加到选项并以这种方式进行更改，并且无法找到如何找到要更改选项背景，文字颜色和圆形菜单的边缘。
因此看起来像 image 1 ，我希望它看起来更像 image 2
我也尝试通过CSS进行此操作以无济于事，这对任何帮助都将非常感谢。
I'm using tailwind to style but am not sure how to change it in CSS either heres the code for the select
<select class="h-8 w-24 bg-neutral-900 cursor-pointer inline-flex align-middle p-1 m-4 font-bold text-neutral-400 hover:text-red-800 active:text-red-900 focus:text-red-800 transition ease-in-out duration-300 carret-black">
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
I can't change it by adding class to the options and doing it that way and haven't been able to find how to change the options background, text colour and rounding the edges of the dropdown menu.
So it looks like image 1 and i want it to look more like image 2
I've also tryed doing it through CSS to no avail either any help would be greatly appreciated thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
确实，您无法使用CSS为选择选项设计。您可以做的是创建自己的选择组件。为了获得所有内容，例如可访问性，运行良好可能很棘手。
您可以将 headless ui listbox 作为起点。这是一个未风格的自定义选择，可以用尾风CSS创建样式。
希望这会有所帮助。
Indeed, you cannot style the select options with CSS. What you can do is create your own select component. To get everything, like accessibility, working well can be tricky though.
You could take the Headless UI listbox as a starting point. This is an unstyled custom select, created to style with Tailwind CSS.
Hope this helps.
DOM中没有可访问的选项容器（包装器）元素可以更改其样式。
您可以创建自己的下拉列表：
there is no accessible options container (wrapper) element in the Dom in order to change it's style.
you can create your own dropdown :