Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sarah Maze 18Sarah Maze 18 

Change color of lightning:input label

I have an aura component that is sitting on a grey background, so I need the field labels of my lightning:input boxes to have white text. But the text boxes themselves are white, so I need the text entry within the boxes to stay default black. No,  I cannot change the background on this page due to branding, etc.

 

Every solution I've tried so far has changed the text entry in the boxes to white while leaving the labels black, which is the exact opposite of what I need. Any ideas? Thank you!

Maharajan CMaharajan C
Sarah, Please post the screenshot of your problem and also post your code what you have tried...
Sarah Maze 18Sarah Maze 18
Here is the form, and I've added handy red arrows to show the text that needs to be white in order to stand out on the white background:
User-added image

<div>
            <h2 class="header">Please enter the following so we can look up your account and verify your identity:</h2>
            <lightning:input type="email" aura:id="field" label="Email Address" required="true" value='{!v.userEmail}' />
            <lightning:input type="string" aura:id="field" label="Contract Number (If you have multiple, enter any one)" required="true" maxlength="6" value='{!v.contractNumber}' />
            <lightning:input type="date" aura:id="field" label="Date of Birth" date-style="short" required="true" value='{!v.DOB}' />
            <lightning:input type="string" aura:id="field" label="Last 4 of Social Security Number" required="true" maxlength="4" value='{!v.SSN}' />
            <br></br>
            <lightning:button variant="brand" label="Submit" title="Brand action" type ='Submit' disabled = "{!v.isDisabled}" onclick="{!c.processUser }" />
            <br></br>
            <br></br>
        </div> 

I have tried adding the class="slds-text-color_inverse", but that gave me white (invisible) text within the text boxes and still hard-to-read dark grey text in the labels. I tried updating the CSS with 

.THIS .white {
    color: #ffffff;
}
 and adding class="white" to the lightning:input lines, but that did the same where the input text was white and the label did not change.

Thank you!
AnkaiahAnkaiah (Salesforce Developers) 
Sarah,

try with below code. 
div>
            <h2 class="header">Please enter the following so we can look up your account and verify your identity:</h2>
            <lightning:input type="email" class="textInput" aura:id="field" label="Email Address" required="true" value='{!v.userEmail}' />
            <lightning:input type="string" class="textInput" aura:id="field" label="Contract Number (If you have multiple, enter any one)" required="true" maxlength="6" value='{!v.contractNumber}' />
            <lightning:input type="date" class="textInput" aura:id="field" label="Date of Birth" date-style="short" required="true" value='{!v.DOB}' />
            <lightning:input type="string" class="textInput" aura:id="field" label="Last 4 of Social Security Number" required="true" maxlength="4" value='{!v.SSN}' />
            <br></br>
            <lightning:button variant="brand" label="Submit" title="Brand action" type ='Submit' disabled = "{!v.isDisabled}" onclick="{!c.processUser }" />
            <br></br>
            <br></br>
        </div>
CSS 
.textInput{
     -webkit-text-fill-color: white;
If this helps, Please mark it as best answer.

Thanks!!
 
Sarah Maze 18Sarah Maze 18
Well, we're getting closer! This changed both the label and the text input color to white. So now I can read the label better (great!) but the text input is invisible (not great). Is there a way to change just the label without the text input?

Thank you!
cefija marrycefija marry

Very helpful advice in this particular post! It’s the little changes that make the largest changes. Thanks for sharing!kfcsecretmenu.info