+ 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.