Change the color of Lightning-input label

Question

I have below code for input text

 <lightning-input label="Email" class="textInput" value={rec.Name} onchange={handleNameChange}></lightning-input>

Here I want to change the color of the label. I have tried it like this. But not working.

.textInput {
    color: black;
    font-weight: bold;
 }

When I see the inspect element it looks like:

How should I write the css?

Answer 1

On the assumption you are talking LWC rather than Aura (since you reference "lightning-input" rather than "lightning:input"), LWC specifically restricts the parent from messing with the child component's presentation via the use of Shadow DOM.

As per the lightning-input documentation, there are no exposed means to apply the styling you wish to apply. The only way to apply any form of styling is via the "variant" attribute.

Answer 2

Try this in CSS file

.textInput{
     -webkit-text-fill-color: black;
}

It worked for me!!

Answer 3

You just need to set the variant to hit the default label

<lightning-input id="input-FirstName" type="text" variant="label-hidden"></lightning-input>

You can add a label using html *First Name

Answer 4

Try this lightning-input style="-webkit-text-fill-color:black"

Answer 5

<p class="l-text"> Email </P><lightning-input variant="label-hidden"value={rec.Name} onchange={handleNameChange}></lightning-input>

.l-text{ color: blue; }

try this.

Answer 6

You can load a special styling component in the main component .JS file

export default class ContainerMain extends LightningElement {
     connectedCallback() {
        // Get Styles
        Promise.all([
            loadStyle(this, Styles + '/Style.css')
        ])
    }
}

In your Style.css insert this

c-my-component-name .class-name{
    color: #5D6570;
    font-size: 14px;
    font-weight: 600;
}

Answer 7

Update your CSS file as:

.THIS .textInput{
    color: Black;
    font-weight: bold;
}

Also, input text as, <lightning:input label="Email" class="textInput" value={!rec.Name} onchange={!c.handleNameChange}></lightning:input>