背景透明在 Safari 中不起作用

Question

我有一个透明背景的下拉菜单。它在 Chrome 中工作正常，但在 Safari 中 select 具有灰色渐变背景。

这是我的 CSS:

div.controls {
  div.wrapper {
    select {
      background: transparent;
      border: none;
      color: blue;
      width: 100px;
      text-overflow: ellipsis;

      option {
        width: 200px;
      }
    }
  }
}

我该如何解决这个问题？

Answer 1

您可以禁用 select 元素的默认外观，方法是：

-webkit-appearance: none;

有关详细信息，请参阅 MDN: appearance (-moz-appearance, -webkit-appearance)。

示例：

select {
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: blue;
  width: 100px;
}

<select>
  <option>Option 1</option>
</select>

背景透明在 Safari 中不起作用

Background transparent is not working in Safari

html

css

safari

示例：