Background transparent is not working in Safari

Question

I have a dropdown with a transparent background. It works fine in Chrome but in Safari the select has this grey gradient background.

This is my CSS:

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

      option {
        width: 200px;
      }
    }
  }
}

How can I fix this?

Answer 1

You can disable the default appearance of the select-element by using:

-webkit-appearance: none;

Alternatively you can use all:

all: unset;

Example:

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

.b {
  all: unset;
}

<select>
  <option>Default</option>
</select>

<select class="a">
  <option>Appearance</option>
</select>

<select class="b">
  <option>All</option>
</select>