HTML Select tag show vertical scroll with 10 option

Question

I want to make a select box like this

with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option.

is there any way to achieve this.

Answer 1

apply a size="10" to your select.

something like:

<select size="10">
   // all your options
</select>

---

You have to put some style to the label like border, background-image etc.

Something like this to be done:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    // all the options
</select>

then use this jQuery code:

$('#choose').click(function(){
    $(this).siblings('select').toggle();
});

Demo @ Fiddle

---

Try with this:

$('#choose').click(function (e) {
    e.stopPropagation();
    $(this).siblings('select').css('width', $(this).outerWidth(true)).toggle();
});

$('#options').change(function (e) {
    e.stopPropagation();
    var val = this.value || 'Select options';
    $(this).siblings('#choose').text(val);
    $(this).hide();
});

---

As you commented:

when size is greater then 1 of select tag, its not showing blue background in hover, when i add background through css option:hover, its working in FF, but not in chrome and safari.

so you can mockup with this:

$('#options').find('option').on({
    mouseover: function () {
        $('.hover').removeClass('hover');
        $(this).addClass('hover');
    },
    mouseleave: function () {
        $(this).removeClass('hover');
    }
});

Demo with hover class.

Answer 2

Size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.

So use <select size="10">..</select>