vertical scrolling of disabled <select> mutliple element not working in IE

Question

I have a select multiple element with scrollbars that is disabled. In Chrome and Firefox on Windows it is still scrollable but no selections can be made. However in IE its not scrollable, so not all options can be seen.

Is there any way to force IE to behave like Chrome/FF in the same way? This is basically a read-only presentation of the multi-select picklist where they can see which elements where selected.

Here's some example code and a fiddle (http://jsfiddle.net/2ET44/2/:

<select multiple size="5" style="max-height:50px" disabled>
    <option>value number 1</option>
    <option>val 2</option>
    <option>val 3</option>
    <option>val 4</option>
    <option>val 5</option>
    <option>value 6</option>
    <option>val 7</option>
    <option>val 8</option>
    <option>val 9</option>
    <option>val 10</option>
</select>

Thanks!

Answer 1

Check this out.
HTML:

<div id="options">
<select multiple size="5" style="height:165px" disabled>
    <option>value number 1</option>
    <option>val 2</option>
    <option>val 3</option>
    <option>val 4</option>
    <option>val 5</option>
    <option>value 6</option>
    <option>val 7</option>
    <option>val 8</option>
    <option>val 9</option>
    <option>val 10</option>
</select>
</div>

CSS:

#options {
    height:50px;
    width:115px;
    overflow-x:hidden;
}

Here is the fiddle: http://jsfiddle.net/2ET44/4/

IE just behaves in an other way. You can fix this by using a div to handle the scrolling.

Answer 2

Try disabling options rather than select

 <select size="5" style="height:100px" >
 <option disabled>value 1</option>
 <option disabled>value 2</option>
 <option disabled>value 3</option>
 <option disabled>value 4</option>
 <option disabled>value 5</option>
 <option disabled>value 6</option>
 <option disabled>value 7</option>
 <option disabled>value 8</option>
 </select>