padding is not working in Safari and IE in select list

Even though the W3 spec doesn't disallow padding in select boxes, for whatever reason webkit browsers (Safari, Chrome) don't support it. Instead, you can remove the padding-left and use text-indent instead, adding the same amount to your select box width.

From your example in your comment:

<select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;">

Use a combination of text-indent and line-height to create the illusion of padding. Works in Safari and Should work in IE as well.

<select style="text-indent:15px; line-height:28px;">
 <option>male</option>
 <option>female</option>
</select>

I know it is an old problem but maybe a newer solution help people working on it now.

I added -webkit-appearance: initial; to my style with padding to fix the problem.

-webkit-appearance: none; didn't help in my case because it shows the select as a textbox instead.

Tested on...

Safari v5.1.7 (7534.57.2) on windows

Safari v8.0.6 (10600.6.3) on Mac

iPhone 6

I have just been researching the same problem. The answer I have come up with is to set the border properties to be the padding, but transparent. For example

Original:

select.paddedBox {
    padding-left:15px;
}

Becomes:

select.paddedBox {
    border-bottom:solid 0px transparent;
    border-left:solid 15px transparent;
    border-right:solid 0px transparent;
    border-top:solid 0px transparent;
}

If you still want to use a border, then you can use the outline property to set it