Menu
I have a <select> box with some year numbers in them, ranging 50 years back, and currently when I click on the box the options will reach to the very bottom of the screen, is there any way to set the max amount of options a select box should show before resorting to a scroll bar to show the rest? I could not find anything about this on Google, the only thing that came close is the size attribute, which is really not what I want.
420
Answer: Use the CSS :focus pseudo-class By default the size of the <select> element is depend on the size of the largest <option> text. However, sometimes it is useful to set a fixed width to the select box and increase its size back to the original size when the user tries to select some option (i.e. on focus).
It is not possible to limit the number of visible elements in the select dropdown (if you use it as dropdown box and not as list). But you could use javascript/jQuery to replace this selectbox with something else, which just looks like a dropdown box. Then you can handle the height of dropdown as you want.
Definition and UsageThe 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.
I believe the reason why you can't do that (sorry) is that these are usually implemented as OS native controls, which also means they behave differently in different browsers/platforms.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
