Select Padding in IE8

Question

I am using the following css for select:

select{
    border: 1px solid #707A68;
    border-radius: 4px 4px 4px 4px;
    margin: 0px 0 5px;
    padding: 8px 10px;
}

The border radius does not work in IE and I am Ok with that but the padding is also not rendering. Is there any workaround or am i doing anything wrong? works fine in Chrome and FF

this is the entire code on the page:

<input type="text" placeholder="Hello World" />
<select>
<option> Option one</option>
    <option> Option two</option>
</select>

<style>
select{
margin-top:20px;
margin-left:20px;
display:block;
padding:20px;

}
</style>

possible duplicate of [padding is not working in Safari and IE in select list](http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list) — Manse, May 03 '12 at 07:28

score 3 · Accepted Answer · answered May 03 '12 at 18:35

3

I finally found the answer! I just had to add

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

to my code !

answered May 03 '12 at 18:35

SNAG

2,011
2
23
43

1

One of those "Doh!" moments. -Homer – Christopher Marshall May 03 '12 at 18:47
Does IE9 support padding in negative values.I am trying to customize the select option in IE9,sample in fiddle http://jsfiddle.net/qhCsJ/2187/ is working if i implement it in my project it is not working.Width of select is not rendering in IE9,so i tried with padding-right:-10px which is also not working.See my so question http://stackoverflow.com/questions/19384907/drop-down-not-working-in-ie8-and-ie9. If possible please help me. – user2725407 Oct 17 '13 at 07:12

Zuazua · Answer 2 · 2012-05-03T08:00:30.880

0

What version of IE are you using?, because I tested it in IE8 and I get the padding.

enter image description here

You can try -ms-border-radius: 4px; to get the border-radius, at least with IE 9 and IE10 it should work.

edited May 03 '12 at 08:00

answered May 03 '12 at 07:45

Zuazua

87
1
9

I am using the same version and I see the the `select` as shown in the image. – Zuazua May 03 '12 at 11:24

mcmwhfy · Answer 3 · 2012-05-03T08:18:16.800

0

<select>'s are inline elements and if you want padding to be applied to inline elements you need to add display:block; which will make it a block element. Tested on IE8.

fiddle: http://jsfiddle.net/Qs3E8/4/

edited May 03 '12 at 08:18

answered May 03 '12 at 08:11

mcmwhfy

1,654
5
36
58

No, not because `select` is inline. Because `select` is a replaced element! Normal inline elements do get padding. By the way, you have a typo in your fiddle. – Mr Lister May 03 '12 at 08:58
@mcmwhfy Iopened the fiddle link in IE 8 and it was working. but when i wrote the same code in a file and ran it it was not. any idea why? http://screencast.com/t/sjtWsSgs – SNAG May 03 '12 at 09:28
I must see html and css code from that page in order to give you an answer, maybe because has a constraint from other element. – mcmwhfy May 03 '12 at 09:42
@mcmwhfy i have made an edit to my question to show the entire code on the page. there is nothing else on the page. I made it to test it. – SNAG May 03 '12 at 18:13

score 0 · Answer 4 · answered Dec 07 '13 at 23:30

use this css for all browser +

<select>
<option> Option one</option>
    <option> Option two</option
</select>

select{
margin-top:10px;
    margin-left:10px;
        display:block;
    padding:5px;
    border:1px 5px #000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;

}

Select Padding in IE8

4 Answers4