padding is not working in Safari and IE in select list

Question

Does any one know why my Safari is not taking padding in select lists? It\'s working fine in FF please tell me what to do. is there any issue with the doctype?

code:

Answer 1

For me worked

-webkit-appearance : caret;

"none" - removed caret in chrome/firefox

"initial" - made my selectboxes jumping when hovering over them in chrome

Answer 2

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

Answer 3

For particular select box apply CSS as "-webkit-appearance:none;"

Answer 4

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

Answer 5

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>

Answer 6

Try this this works for firefox,ie some truble with padding but works with background image. Best works in google chrome and firefox. This do not work in opera at all but padding works. So i do not care it doesn't work in opera or other browser because i hate them and it is not porssible to fix all problems to work great in all browsers.

Just make select option 208 px image and put it like this. It has some hack elements for ie ;)

.sl{
background-color: Transparent;

border: 0;
background: #181818;
color: #cccccc;
outline: none;
padding: 15px;
padding-left: 5px; 
font-size: 8pt;
line-height: 10px;

width: 208px;
height: 29px;
-webkit-appearance: none;

}



<select style="background: url(select.gif) no-repeat 0 0;" name="some_countries" class="sl">
<option style="background: #000;"  value="">What you need ?</option>
<option style="background: #000;" value="">I think it's good</option>
<option style="background: #000;"  value="">what do you think ?</option>
<option style="background: #000;" value="">Do you think the same lime me ? :)</option>
<option style="background: #000;"  value="">So what are you wating ?</option>
<option style="background: #000;" value="">Grab it now and be happy ;)</option>
</select>

See in the action how it looks like ;)

I hope you helped some ;)