CODEWITHSUNDEEP
cssinternet-explorerheighthtml-select
Joe.wang
Joe.wang

Reputation: 11793

Set select height cross browser

All, Coding CSS for Cross-browser is not an easy job. Especially for the IE browser, Frequently I found it is ok in other browsers like chrome and firefox. but not work in the IE. Now I am stuck with it in blow code. please help to review it .thanks. http://jsfiddle.net/malaikuangren/Ed9KU/

<div>
<select size="2">
        <option value="0" >0</option>
        <option value="1" >1</option>
        <option value="2" >2</option>
        <option value="3" >3</option>
        <option value="4" >4</option>
        <option value="5" >5</option>
        <option value="6" >6</option>
        <option value="7" >7</option>
        <option value="8" >8</option>
        <option value="9" >9</option>
        <option value="10" >10</option>
        <option value="11" >11</option>
        <option value="12" >12</option>
        <option value="13" >13</option>
        <option value="14" >14</option>
        <option value="15" >15</option>
        <option value="16" >16</option>
      </select>
</div>

div{
    height:500px;
    width:500px;
    border:1px solid red;
    position:relative;
}
select{
    top:0;
    bottom:0;
    position:absolute;   
}

Upvotes: 1

Views: 6640

Answers (2)

Bart Az.
Bart Az.

Reputation: 1646

It looks ok if you set the height of select element to inherit or 100%

Upvotes: 3

Praveen
Praveen

Reputation: 56509

inherit the height of the parent div to your select tag

like,

select{
    top:0;
    bottom:0;
    position:absolute;
     height: inherit;  // or use 100%
}

check this Fiddle

Upvotes: 3

Related Questions