Question

我正在尝试更改select option边框，但无法做到这一点，我已多次尝试但未找到合适的解决方案。我附上了屏幕截图。

enter image description here

<head>
  <style>
    select option {
      background:transparent;
      border:0;
    }
  </style>
</head>

<body>
  <select>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
    <option>hello</option>
  </select>
</body>

Answer 1

选择的下拉列表是所谓的ShadowDOM的一部分。在目前的CSS规范3级中，没有办法定位大多数ShadowDOM元素。您可以阅读ShadowDOM here上的规格，尽管那里没有太多关于您想要的内容。

Chrome有一些专有选择器可以更改某些 shadowDOM元素，但不是全部。 Firefox的数量甚至更少（据我所知），Opera也没有。 IE可能同样糟糕或更糟。

考虑到兼容性，最好的办法是使用Jquery插件来模拟使用其他HTML元素的select，如果你真的想要设置它的样式。 Here's a neat one

Answer 2

简短回答：

可以使用select元素

进行此操作

可能的解决方案：

使用任何用户界面库（bootstrap，jquery UI或any other）制作自定义类似选择的元素，您可以根据需要设置样式（它们都使用其他自定义友好元素，例如ul，li，div ....）

Answer 3

在查看了几个答案之后，我在stackoverflow上找到了这个答案。显然，你要求的是无法做到的。

这是链接和说明。

Explanation

Answer 4

据我所知，这是不可能的，依赖于每个浏览器的属性，没有过去的问题可能会让事情变得更清晰。

问候。

也许这可能会有所帮助：

How to style a <select> dropdown with CSS only without JavaScript?

选择菜单选项边框无

4 个答案: