19

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:

<select style="padding-left:15px">
<option>male></option>
<option>female></option>
</select>

I'm using the following doctype;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dan McGrath
  • 41,220
  • 11
  • 99
  • 130
Mayur
  • 2,835
  • 6
  • 27
  • 27
  • 1
    Are you trying to pad your select or your options? – Ben Hoffman Jun 03 '10 at 14:32
  • select – Mayur Jun 03 '10 at 14:35
  • 3
    Ironically, padding for select lists now works in Chrome for Windows (Version 30.0.1599.69 m) but not in Chrome for Mac (Version 30.0.1599.69). Any ideas why the Mac version of Webkit is not supporting this but the Windows version is? – Brit Mansell Oct 09 '13 at 14:39
  • 1
    `-webkit-appearance: none;` this will make it work. – CodeGodie Jul 04 '15 at 23:09
  • 1
    possible duplicate of [padding is not working in ie and safari](http://stackoverflow.com/questions/2971662/padding-is-not-working-in-ie-and-safari) – GOTO 0 Sep 15 '15 at 21:41
  • -webkit-appearance: none; work if applied to – gtamborero Feb 03 '19 at 16:57

7 Answers7

22

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;">
mVChr
  • 49,587
  • 11
  • 107
  • 104
12

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

Community
  • 1
  • 1
EMalik
  • 2,446
  • 1
  • 26
  • 13
  • This just saved me, thank you. I tried using text-indent but the indentation size was different in every browser. I set it back to using left padding and added -webkit-appearance: initial; and it worked great! – Bryson Jan 22 '16 at 23:33
  • Beast! Worked well. – Karam Haj Sep 02 '23 at 15:29
12

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>
Deanna
  • 23,876
  • 7
  • 71
  • 156
GDiz
  • 121
  • 1
  • 3
  • @anglimass I wouldn't expect a front-end developer to be using IE7! :) Sites like jsFiddle are targetted more toward users with modern browsers like Chrome, Firefox, etc. – Web_Designer Feb 09 '12 at 08:44
3

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

topherg
  • 4,203
  • 4
  • 37
  • 72
1

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

user5124221
  • 19
  • 1
1

For me worked

-webkit-appearance : caret;

"none" - removed caret in chrome/firefox

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

Jiro Matchonson
  • 875
  • 1
  • 17
  • 24
  • best solution: using text-indent (as suggested in other answers) adds a DIFFERENT amount of space in different browsers. and -webkit-appearance: none or initial removes the caret – Herbi Oct 17 '21 at 09:01
1

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

polas
  • 11
  • 1