Search code examples
htmlcssbrowsersafaricross-browser

Padding doesn't work on select tags in Safari

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. Ensure you use the following style for the change to take effect on Webkit browsers: -webkit-appearance: initial;

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