Thanh cuộn ngang không hoạt động trên thẻ được chọn

Question

Tôi đang cố gắng đặt thanh cuộn ngang trên thẻ chọn không hoạt động.

Dưới đây là các mã:

<select style="height: 250px; width: 300px; overflow: auto;" 
    id="dnn_ctr459_ManageRelatedProducts_lstFrom" multiple="multiple" 
    name="dnn$ctr459$ManageRelatedProducts$lstFrom" class="selectList" size="4"> 
    <option value="9">33 Uithoeke</option> 
    <option value="10">Aantekeninge by Koos Prinsloo</option> 
    <option value="11">Aantekeninge by Koos Prinsloo (enhanced e-book)</option> 
    <option value="12">Access to Social Security</option> 
    <option value="13">Angling for Interpretation</option> 
    </select> 

.selectList 
{ 
    height: 250px; 
    overflow: auto; 
    width: 300px; 
} 

Matt của kết quả giải pháp trong việc này: Kết quả

cuối cùng trong FF

kết quả cuối cùng trong IE, nhờ Matt!

Answer 1

Không chắc chắn nếu bạn có thể làm điều đó, nhưng bạn luôn có thể lừa nó vào như thế bằng cách đặt một div xung quanh lựa chọn, và thiết lập chiều rộng và cuộn ngang trên đó. Taken from here.

Answer 2

Bạn không thể buộc thanh cuộn trên các phần tử được chọn.

Answer 3

Có, bạn có thể. Hãy dùng thử với JQuery:

<div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;"> 
<select id='mySelect' name="mySelect" size="5"> 
    <option value="1">one two three four five six</option> 
    <option value="2">seven eight</option> 
    <option value="3">nine ten</option> 
    <option value="1">one two three four five six</option> 
    <option value="2">seven eight</option> 
    <option value="3">nine ten</option> 
    <option value="1">one two three four five six</option> 
    <option value="2">seven eight</option> 
    <option value="3">nine ten</option> 
    <option value="1">one two three four five six</option> 
    <option value="2">seven eight</option> 
    <option value="3">nine ten</option> 
</select> 
<div id="divv" style='font-size: 1px'>&nbsp</div> 
</div> 

<script> 
    $('#divv').css('width', $('#mySelect').outerWidth()); 
    $('#mySelect').css('width', $('#test').outerWidth()); 
    $("#test").scroll(function() { 
     $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft()); 
    }); 
</script>