CODEWITHSUNDEEP
htmlcss
Mahesh
Mahesh

Reputation: 870

IE Select Box option element height not working

select item option lists are not showing properly in IE.

enter image description here

need to add padding and height for option element. Does any one knows how to fix this?

CSS

.reser_item_long select {
width: 106%;
width: 106.5%\9;
height: 33px;
*height: 33px;
float: left;
text-align: left;
border: none;
outline: none;

background: none;
cursor: pointer;
overflow: hidden;
text-transform: uppercase;
font-size: 10px;
color: #889099;
color: #889099\9 !important;
padding: 9px 0 0 7px;
padding: 0 0 0 7px\9 ;
padding: 0 0 0 7px\0/;
display:block;  
(-bracket-:hack;
   padding: 2px 0 0 7px ;
);

}

HTML

    <div class="reser_item_long">               
    <div class="select-wrapper">
    <select id="cmb-country" name="cmb-country">
    <option value="-1">Please Select a Country</option>
    <option value="0">Afghanistan</option>
    <option value="0">Åland Islands</option>
    <option value="0">Albania</option>
    <option value="0">Algeria</option>
    </select>
    </div>
    </div>

Upvotes: 5

Views: 1747

Answers (2)

JWarker
JWarker

Reputation: 249

There is no work-around for this aside from ditching the select element

Upvotes: 2

Bjarke Brask Rubeksen
Bjarke Brask Rubeksen

Reputation: 401

You should differently edit this question and add you browser version. But let me give you a solution after all.

The problem is that the Select, options, file inputs are rendered by the OS/Browser and not by the HTML itself and therefor give's problem in styling it.

You can via javascript simulate and style your own dropdown to make sure it looks the same way in every browser and OS. Basically it generates something that look and feels like a dropdown list but is just an interface for the hidden select in your code.

You could use something like http://formalize.me/ to style all forms elements on your page.

Upvotes: 2

Related Questions