3

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: enter image description here

How should I write the css?

7 Answers 7

6

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.

3
  • When I add the color via the inspect element it works. And there it is under .slds-scope .slds-form-element__label { Jan 21, 2020 at 11:19
  • I have updated the question with the image Jan 21, 2020 at 11:27
  • 2
    Using the inspector works because you are accessing the shadow DOM content directly. You cannot do it programmatically in the LWC framework. See my answer.
    – Phil W
    Jan 21, 2020 at 11:51
3

Try this in CSS file

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

It worked for me!!

1
  • +1 While this works here, but it will not work for all users as it is not standardized yet, refer Aug 19, 2020 at 8:16
1

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

1

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

2
  • 1
    This is a duplicate of an existing answer, but with less information.
    – Derek F
    Nov 3, 2021 at 11:19
  • It's the easiest answer to implement, @DerekF Oct 6, 2022 at 4:10
0
<p class="l-text"> Email </P><lightning-input variant="label-hidden"value={rec.Name} onchange={handleNameChange}></lightning-input>

.l-text{ color: blue; }

try this.

1
  • This does not work. Aug 19, 2020 at 8:17
0

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;
}
-1

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>

2
  • 1
    Given the use of "lightning-input" I would suggest this is in the context of LWC rather than Aura, in which case the approach you suggest will not work.
    – Phil W
    Jan 21, 2020 at 11:05
  • Hi Rashmi, Yes I am working on LWC Jan 21, 2020 at 11:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .