Fixing WebKit select list drop-downs


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


Firefox select list drop-down


Chrome select list drop-down


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;

The result is like a reset: 

Webkit select list drop-down webkit-appearance: none


Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.