vertical scrolling of disabled <select> mutl

问题:

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!

回答1:

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>

回答2:

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.