21

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

在此处输入图像描述

<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>
4

3 回答 3

18

选择的下拉列表是所谓的ShadowDOM的一部分。在当前的 CSS 规范第 3 级中，没有办法针对大多数 ShadowDOM 元素。您可以在此处阅读有关 ShadowDOM 的规范，尽管关于您想要的内容并不多。

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

考虑到兼容性，最好的办法是使用 Jquery 插件来模拟使用其他 HTML 元素的选择，如果你真的想设置它的样式的话。这是一个整洁的。

于 2012-12-27T14:37:55.210 回答
1

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

问候。

也许这可能会有所帮助：

如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉菜单的样式？

于 2012-12-27T15:12:24.933 回答
1

简短的回答：

这不能用一个select元素来完成

可能的解决方案：

使用任何 UI 库（bootstrap、jquery UI或任何其他）来制作自定义的 select-like 元素，您可以根据需要设置样式（它们都使用其他自定义友好元素生成控件，如ul, li, div.... )

于 2017-03-02T09:17:59.133 回答