CODEWITHSUNDEEP
htmlcss
SNAG
SNAG

Reputation: 2113

Select Padding in IE8

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>

Upvotes: 2

Views: 5305

Answers (4)

user3076482
user3076482

Reputation:

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;

}

Upvotes: 0

SNAG
SNAG

Reputation: 2113

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 !

Upvotes: 3

mcmwhfy
mcmwhfy

Reputation: 1686

<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/

Upvotes: 0

Zuazua
Zuazua

Reputation: 87

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.

Upvotes: 0

Related Questions