Padding doesn't work on select tags in Safari

Question

Possible Duplicate:
padding is not working in Safari and IE in select list

So I have a basic select tag like so:

<select>
  <option>1</option>
  <option>2</option>
  <option>2</option>
</select>

But if I put padding on select tag, it doesn't work on Safari:

select {
  padding: 6px;
}

On IE7, I understand, but on Safari? Is there a way to get around this?

Solution

Answered previously here: https://stackoverflow.com/a/2967371/181002

Webkit has taken it upon itself to disallow padding for select-items, but you can achieve the same effect by using a simple 'hack', consisting of applying line-height and text-indent to your selectitem.

Here's an example: http://jsfiddle.net/B858P/

Comments

[catandmouse]

I'd like to see your jsFiddle example but I think the link is broken.

[Andreas Eriksson]

Yeah, it looks like jsFiddle is down. Here's a jsBin equivalent: jsbin.com/eleduj/2/edit Be warned though, this hack is pretty much webkit-exclusive, since the text-indent seems to send the little select icon outside of the box in Firefox, and line-height just does nothing at all, which means that you'll probably be forced to perform all sorts of neat CSS hacks to get it working cross browser, and at that point, you're probably better off building our own custom selectbox: weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/…

[catandmouse]

I'm just wondering what's the reason behind disallowing padding for webkit browsers? Anyway, in Chrome the padding displays, problem only occurs in Safari. I'll try your solution anyway.

[Andreas Eriksson]

Yeah, i just noticed that Chrome has no problems with it anymore, i guess Google added support for it. I suppose Apple didn't think of it.

[etoxin]

I could not get the JsFiddle or line-height to work in safari 6.0.5.

[greaterKing]

you need to declare -webkit-appearance:none or something else so the height will work. Otherwise the webkit defaults will take precedence.

[Herbi]

Best solution I found was "-webkit-appearance : caret;"