Increase font size of input label UI Builder component?

[Kiran Kumar 76]

I have added an input component in UI builder label of input seems small

How can i incrase it ,Tried adding css but its not reflecting 

[lauri457]

As you can only add globally scoped css to components your font-size will just get overridden by the css declared on the labels class. Neither of the variables controlling label font-size is set on the polaris theme so depending on your theme setup you'd need to set either of these variables to stop it from setting on the .75rem fallback. 

This will then change all labels with this class in experiences using the app shell/theme. One option would be to leave the label empty and add another component with just the text before it if you don't want the size changed globally. Or maybe you could create a custom component that wraps the input component with some styling

Input component - Now Component Library | ServiceNow Developers

[kaushal_snow]

@Kiran Kumar 76 ,

The UI Builder input label font size may not change because many components use built in Horizon Design System styles which don’t always allow simple override via CSS in component, so instead of relying only on the component’s View and edit CSS box, you should put your CSS in the wrapper container (or UI Builder theme), target the internal label selector (for example .now-input__label or appropriate nested class in the input component), and use sufficiently specific selectors (or even !important if necessary) so that your style takes precedence......also be aware that some parts of the component may be shadow DOM or internal slots that UI Builder won’t expose to simple CSS editing.....

If you found my response helpful, please mark it as ‘Accept as Solution’ and ‘Helpful’. This helps other community members find the right answer more easily and supports the community.