선택 태그에서 가로 스크롤 막대가 작동하지 않습니다.

Question

작동하지 않는 선택 태그에 가로 스크롤 막대를 설정하려고합니다. 이에

<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; 
} 

매트의 솔루션 결과 : FF

IE에서

최종 결과에

최종 결과, 매트 덕분에

여기에 코드입니다!

Answer 1

당신이 할 수 있는지 확실하지 않지만, 선택 주위에 div를 놓고 그 위에 너비와 가로 스크롤을 설정하여 항상 그런 식으로 속일 수 있습니다. Taken from here.

Answer 2

선택 요소에 스크롤 막대를 적용 할 수 없습니다.

Answer 3

예, 가능합니다. 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>