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?


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.

  • When I add the color via the inspect element it works. And there it is under .slds-scope .slds-form-element__label { – Thirumagal Jan 21 '20 at 11:19
  • I have updated the question with the image – Thirumagal Jan 21 '20 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 '20 at 11:51

Try this in CSS file

     -webkit-text-fill-color: black;

It worked for me!!

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

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>

  • 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 '20 at 11:05
  • Hi Rashmi, Yes I am working on LWC – Thirumagal Jan 21 '20 at 11:08
<p class="l-text"> Email </P><lightning-input variant="label-hidden"value={rec.Name} onchange={handleNameChange}></lightning-input>

.l-text{ color: blue; }

try this.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.