function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
knght4yshuaknght4yshua 

How can I change the font size of a label of a lightning field?

I have the following code:
  
<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!
 
Best Answer chosen by knght4yshua
Ajay K DubediAjay K Dubedi
Hi,
Done change your component code: 
<lightning:select aura:id="requestTypeSelect"
                  name="requestTypeSelect"
                  label="I'd like to: "
                  required="true"
                  value="{!v.requestTypeName}"
                  onchange="{!c.setRequestTypeCmp}"
                  class="font">
    <option value="">-- None --</option>
    <aura:iteration items="{!v.requestTypeNames}" var="requestTypeName">
        <option value="{!requestTypeName}">{!requestTypeName}</option>
    </aura:iteration>
</lightning:select>
And just change the CSS from the Style section of lightning component and add these lines : 
.THIS .slds-form-element__label{
    font-size: 1.75rem !important;
}

User-added image

Thanks
Ajay Dubedi

All Answers

Ajay K DubediAjay K Dubedi
Hi,
You just put lightning:select tag inside a <div> tag and then put style into it like that: 
<aura:component >
    <div style="font-size: 50px;">
        <lightning:select aura:id="requestTypeSelect"
                           name="requestTypeSelect"
                           label="I'd like to: "
                           required="true"
                           value="{!v.requestTypeName}"
                           onchange="{!c.setRequestTypeCmp}"
                      class="font"/>
    </div>
</aura:component>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
knght4yshuaknght4yshua
Thanks Ajay,

I have tried that.  Here is the code and a before screenshot:
  
<lightning:select aura:id="requestTypeSelect" 
				  name="requestTypeSelect" 
				  label="I'd like to: " 
				  required="true" 
				  value="{!v.requestTypeName}" 
				  onchange="{!c.setRequestTypeCmp}"
				  class="font">
	<option value="">-- None --</option>
	<aura:iteration items="{!v.requestTypeNames}" var="requestTypeName">
		<option value="{!requestTypeName}">{!requestTypeName}</option>
	</aura:iteration>
</lightning:select>

User-added image

Here is the code with the suggested changes and an after screenshot:
  
<div style="font-size: 50px;">
	<lightning:select aura:id="requestTypeSelect" 
					  name="requestTypeSelect" 
					  label="I'd like to: " 
					  required="true" 
					  value="{!v.requestTypeName}" 
					  onchange="{!c.setRequestTypeCmp}"
					  class="font">
		<option value="">-- None --</option>
		<aura:iteration items="{!v.requestTypeNames}" var="requestTypeName">
			<option value="{!requestTypeName}">{!requestTypeName}</option>
		</aura:iteration>
	</lightning:select> 
</div>

User-added image

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
Ajay K DubediAjay K Dubedi
Hi,
Done change your component code: 
<lightning:select aura:id="requestTypeSelect"
                  name="requestTypeSelect"
                  label="I'd like to: "
                  required="true"
                  value="{!v.requestTypeName}"
                  onchange="{!c.setRequestTypeCmp}"
                  class="font">
    <option value="">-- None --</option>
    <aura:iteration items="{!v.requestTypeNames}" var="requestTypeName">
        <option value="{!requestTypeName}">{!requestTypeName}</option>
    </aura:iteration>
</lightning:select>
And just change the CSS from the Style section of lightning component and add these lines : 
.THIS .slds-form-element__label{
    font-size: 1.75rem !important;
}

User-added image

Thanks
Ajay Dubedi

This was selected as the best answer
knght4yshuaknght4yshua
Beautiful Ajay!  That worked perfectly!  Thank you so much!
Aditya Sharma 114Aditya Sharma 114
Thanks Ajay..You solved my prob.
Jim Bedford-Roberts 11Jim Bedford-Roberts 11
Best practice is to use styling hooks (https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/), rather than overriding the slds-form-element__label class. The tricky bit is knowing what style hooks are available for a particular class. This page (https://www.lightningdesignsystem.com/components/input/#site-main-content) describes style hooks for the lwc input component, mentioning color, radius and spacing, but nothing about font size. Fortunately you can use the Chrome inspector to examine an input element on some test page and see what hooks are available for the slds-form-element__label class, as follows:
User-added image
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: 
:host {
    --lwc-formLabelFontSize:18px;
}