select does not take the font size into account

[mooxl]

If the font size of a select field is changed, the height of the field does not adjust and the text is cut off.

Code for reproducing:

<select className="text-xxl">
      <option>default size</option>
</select>
<input type="text" className="text-xxl"/>

Images:

[adamwathan]

Hey! Can't reproduce this, works as expected:

https://play.tailwindcss.com/m4nkWD9C9f

Please provide an actual reproduction if this is still an issue for you and you can verify by comparing against my demo that it's not user error.

[mooxl]

Hey, thanks for the quick reply!
I forgot to mention that in my example I set the font size of the body to 62.5% so that I can convert the rem sizes more easily.
Does this make it a mistake that I should fix from my side?

[adamwathan]

Still works when you do that:

https://play.tailwindcss.com/UOfYogDtPv?file=css

[mooxl]

strange... then I must have done something wrong on my side. I'll get to the bottom of it and let you know as soon as I find the reason. Thanks for the quick reply!

[mooxl]

After transferring the settings of my project, I finally found the cause of the bug described above.
Apparently the reason is the use of individual text sizes:

https://play.tailwindcss.com/gZvO8KsBSQ

[adamwathan]

Ah yep in this case it's because your custom font size doesn't have a default line-height associated with it. Add your desired line-height to the select when setting the font size and you're good:

https://play.tailwindcss.com/O5ZqffHuJS

<select class="text-custom leading-tight">...</select>

[mooxl]

Sometimes it can be as simple as that. I didn't have the line height in mind.
Thank you very much!