背景透明在 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>