vertical scrolling of disabled <select> mutl

2019-02-27 00:11发布

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!

2条回答
迷人小祖宗
2楼-- · 2019-02-27 01:01

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>
查看更多
趁早两清
3楼-- · 2019-02-27 01:03

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.

查看更多
登录 后发表回答