I am using Telerik UI for dropdowns and other UI elements. For some reason, my dropdown text size is being overwritten as 10px. I cannot figure out what is causing it.

Here is how it displays in browser:

Checking out the computed styles for the element, it says it is 10 px.

But nothing below the element says 10 px. I don't understand where the 10 px is coming from. Any help is much appreciated!

CodePudding user response：

The font size of 1rem refers to the font size for the root element (HTML). Since it is 1 rem, that means it uses 1 times the root element font size. You can see that your html element has the font size defined as 62.5%. For most browsers the default font size is 16px, so 16 times 0.625 is 10px

Here's a helpful article on rem units in CSS: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/