Max-height for the drop-down list of elements (option elements)

Question

How to limit the height of the select drop-down element, so if the total amount of options is greater than this height, I should get a scroll in the drop-down list. I would be pleased if I could do this in terms of the number of pixels or the number of elements.

So to speak, 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 can I display only the first 4 options, and the rest in the scroll.

This is what I still have, and it does not work.

Answer 1

Searching StackOverflow, I came across this . Unfortunately, if you want to keep it in the drop-down list, you won’t be able to achieve what you want in CSS. JavaScript or jQuery will do the trick, as indicated in the link, or you can use the size attribute in the select tag, but this will break the drop-down list.

Answer 2

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

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