Using '-webkit-appearance:none;' to stop apple messing with CSS

Question

So Apple/Safari have their own CSS for various elements like <select> or <button> tags.

I can get around this by using -webkit-appearance:none; but for my <select> this is removing the little drop down arrow too which I want to keep.

Is there a way around this to remove the other additional styling but keep the arrow, or else replace the arrow in a way that is going to be consistent across browsers?

Answer 1

As per my comment, using appearance: none will actually strip all browser/OS-specific styling on the <select> element. That means that the dropdown arrow will also be removed, as different OSes will have different arrow styles, too.

What you can do is simply to provide your own background image for the arrow. This can be done by giving sufficient padding on the right side of the element, and then injected a background image.

The example below uses an SVG arrow icon from Google Material Design as part of the data URI.

select {
  -webkit-appearance: none;
  appearance: none;
  
  /* Add paddings to accommodate arrow */
  padding: 8px;
  padding-right: 30px;
  
  /* Add arrow icon */
  /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
  background-position: center right;
  background-repeat: no-repeat;
}

<select>
  <option value="Lorem" selected>Lorem</option>
  <option value="Ipsum">Ipsum</option>
  <option value="Dolor">Dolor</option>
  <option value="Sit">Sit</option>
  <option value="Amet">Amet</option>
</select>

Note: if you want to support IE, you will have to use encoded SVG markup in your data URI, i.e.:

background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');