padding is not working in Safari and IE in select list

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

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>

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;">