Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Padding doesn't work on select tags in Safari [duplicate]

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?

like image 895
catandmouse Avatar asked Mar 08 '12 09:03

catandmouse


1 Answers

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/

like image 54
Andreas Eriksson Avatar answered Oct 26 '22 12:10

Andreas Eriksson