You need to sign in to do that
Don't have an account?
knght4yshua
How can I change the font size of a label of a lightning field?
I have the following code:
Is this possible?
Thanks!
<lightning:select aura:id="requestTypeSelect" name="requestTypeSelect" label="I'd like to: " required="true" value="{!v.requestTypeName}" onchange="{!c.setRequestTypeCmp}" class="font">The font size of the label "I'd like to:" is small and I'd like to increase it. Changing the font in any way via a class, like "font" above, only changes the font within the select menu, not the label itself.
Is this possible?
Thanks!
Done change your component code: And just change the CSS from the Style section of lightning component and add these lines :
Thanks
Ajay Dubedi
All Answers
You just put lightning:select tag inside a <div> tag and then put style into it like that: I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
I have tried that. Here is the code and a before screenshot:
Here is the code with the suggested changes and an after screenshot:
Unfortunately it did not work. Neither an inline style in a surrounding div nor a styled class within the lightning:select tag itself affect the label size. I am wanting "* Choose your request type:" to be larger.
Any other suggestions?
Thanks again
Done change your component code: And just change the CSS from the Style section of lightning component and add these lines :
Thanks
Ajay Dubedi
This shows a style hook called --lwc-formLabelFontSize that can be used to vary the label font size. Consequently its possible to increase the label size as follows, using the special CSS pseudo-class :host that scopes the change to your custom component: