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

您可以使用以下方法禁用 -element 的默认外观select：

-webkit-appearance: none;

有关更多信息，请参阅MDN：外观（-moz-appearance、-webkit-appearance）。

例子：

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

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