Change the <option>'s height

Hello!

I have a select element and trying to adjust it’s options, to having bigger height etc.
But many css properties are not working for these fields.

Having done some research I cannot figure it out, is there anyone that have done something similar before?

Thanks!

Since select boxes are rendered by the OS as a drop down list itself, it is often out of the reach of CSS when it comes to styling options. However, there are other ways to highlight options like using an <optgroup> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) which can organize options into groupings if you need to differ between options.

The select itself can also be styled in many ways, just that the options themselves are limited in their styling potential. Sometimes increasing the font size will also increase the space around items and give you that feel of more spacing. So that is also something you can try. :slight_smile:

4 Likes

There are several websites showing how to customise a select element (or something that looks and hehaves like a select element).Here for example are 31 methods:

And using JavaScript:
https://www.w3schools.com/howto/howto_custom_select.asp

4 Likes

Ok perfect I will try an alternative way to see what can be done!!

Thank you very much guys!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.