Always show vertical scrollbar in select

Question

The following code produces a listbox with 2 options:

<select size="10">
 <option>1</option>
 <option>2</option>
</select>

Is it possible to always show a vertical scrollbar in this listbox? I'm asking this question because style="overflow-y: scroll;" doesn't work here in IE7.

User · Answer

I guess you cant  this maybe a limitation or not included in the IE browser  I have tried your jsfiddle with IE6-8 and all of it doesn t show the scrollbar and not sure with IE9  While in FF and chrome the scrollbar is shown  I also want to see how to do it in IE if possible   If you really want to show the scrollbar  you can add a fake scrollbar  If you are familiar with some of the js library which use in RIA  Like in jquery dojo some of the select is editable  because it is a combination of textbox   select or it can also be a textbox   div   As an example  see it here a JavaScript that make select like editable

User · Answer

add   overflow-y  scroll   in your css bud

User · Answer

It will work in IE7  But here you need to fixed the size less than the number of option and not use overflow-y scroll  In your example you have 2 option but you set size 10  which will not work   Suppose your select has 10 option  then fixed size 9   Here  in your code reference you used height 100px with size 2  I remove the height css  because its not necessary and change the size 5 and it works fine   Here is your modified code from jsfiddle    lt select size  5  style  width 100px   gt    lt option gt 1 lt  option gt    lt option gt 2 lt  option gt    lt option gt 3 lt  option gt    lt option gt 4 lt  option gt    lt option gt 5 lt  option gt    lt option gt 6 lt  option gt   lt  select gt    this will generate a larger select box than size 2 create In case of small size the select box will not display the scrollbar you have to check with appropriate size quantity Without scrollbar it will work if click on the upper and lower icons of scrollbar I show both example in your fiddle with size 2 and size greater than 2 e g  3 5    Here is your desired result  I think this will help you   CSS     wrapper      border  1px dashed red      height  150px      overflow-x  hidden      overflow-y  scroll      width  150px       wrapper  selection     width 150px     border 1px solid  ccc      HTML   lt div class  wrapper  gt   lt select size  15  class  selection  gt       lt option gt Item 1 lt  option gt       lt option gt Item 2 lt  option gt       lt option gt Item 3 lt  option gt   lt  select gt   lt  div gt

[html] Always show vertical scrollbar in <select>

The answer is

Examples related to html

Examples related to css

Tags