Fixing WebKit select list drop-downs

August 31, 2014

Drop-downs look totally different depending on the operating system and the browser.

Firefox:

Firefox select list drop-down

Chrome:

Chrome select list drop-down

Safari:

Safari select list drop-down

Chrome and Safari don't respect the height given in the stylesheet. Both override this with the default browser stylesheet.

In the above example they are narrower, so inline styling is much harder (text doesn’t align properly with the select list drop-down).

But there is an easy fix with one vendor prefix:

.form-item select {
  -webkit-appearance: none;
  border-radius: 0;
  -webkit-border-radius:0px;
}

The result is like a reset:

Webkit select list drop-down webkit-appearance: none

Add new comment