max-height for select element dropdown (option elements)

Question

How do I limit the height of the dropdown of a select element - so that if the total amount of options is greater than this height - I should get a scroll in the dropdown. I'd be satisfied if I could do this in terms of pixels or number of items.

So say I had the following html markup:

<select>
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

How would I display only say the first 4 options and the rest within a scroll.

This is what I have so far, and it's not working.

score 11 · Accepted Answer · edited May 23 '17 at 12:34

11

Searching around on StackOverflow, I came across this. Sadly enough, if you want to keep it a dropdown-box, you cannot achieve what you want in CSS. JavaScript or jQuery will do the trick, as said in the link, or you could use the size attribute on your select tag, but this will break the dropdown-box look.

edited May 23 '17 at 12:34

Community

1
1

answered Nov 13 '12 at 14:32

Simon Carlson

1,919
5
24
35

1

Yes, After adding `size` like `size=5` the select box opened for 5 options. But It breaks select box looks. – Chandan Sharma Oct 02 '19 at 18:41

Paulo Roberto Rosa · Answer 2 · 2013-04-25T12:57:43.703

-3

I found the answer in CSS+HTML, you can do this way:

<select>
  <optgroup style="max-height: 65px;" label="">
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
  </optgroup>
</select>

edited Apr 25 '13 at 12:57

answered Apr 25 '13 at 12:01

Paulo Roberto Rosa

3,071
5
28
53

2

Just tried this out, but it doesn't seem to work. Check [this](http://jsfiddle.net/danield770/7VCng/) out. – Danield Apr 25 '13 at 12:16
im using firefox and here it worked, change the max-height to 65px to get just the first 4 options – Paulo Roberto Rosa Apr 25 '13 at 12:53
hmm seems to work just in firefox... the problem is the css property max-height that dont works fine in all browsers – Paulo Roberto Rosa Apr 25 '13 at 13:04
1

i found the problem: its the style that dont apply on in another browsers just in firefox... im checking this out – Paulo Roberto Rosa Apr 25 '13 at 13:11

max-height for select element dropdown (option elements)

2 Answers2

Linked