3

When changing the background-color attribute of a <lightning-input this also changes the label's background.

Inspecting the input I found a class called .slds-input which allows you to change the background color of the input.

.slds-input

I'm creating a form when a field is not valid and the form is submitted, the input background will turn red for the invalid fields and green for the valid fields. How can I achieve this? I understand the concept I just need a pointer to the syntax or a reference.

I have tried using a style hook (success) but this changes both the label and the input.

 const isInputsCorrect = [...this.template.querySelectorAll('lightning-input')]
        .reduce((validSoFar, inputField) => {
            if(!inputField.reportValidity){
                
                // I think here is where i will change the background but how?
                inputField.slds-input.background-color = red;
                
            }
            return validSoFar && inputField.checkValidity();
        }, true);
1

2 Answers 2

2

Due to CSS isolation from the Shadow DOM, you can't particularly target internal components of a parent component (e.g. you can't target the input field to style its background). Unfortunately, your only real options are to either write your own input component, or deal with the limitations of what you can do with CSS across the shadow DOM, which only allow you to apply styles to the parent component.

2
  • If I'm not mistaken, couldn't they use the styling hooks from slds? Like: lightningdesignsystem.com/components/input/… Dec 31, 2022 at 2:20
  • 1
    @RenatoOliveira You can, but those are limited in how they work. I didn't see an entry for targeting just an input area property. If I've missed it, I'd be more than happy to be proven wrong.
    – sfdcfox
    Dec 31, 2022 at 2:44
2

While you are limited to the shadow dom under normal circumstances Salesforce has the Light Dom in beta currently which can work around this. You'll need to check the guidelines and limitations to see if it will work for you. I've provided a quick example component I wrote up that is similar to what you're looking for.

testLWC.css

lightning-input.class1 > div > input {
    background-color: green !important;
}

lightning-input.class2 > div > input {
    background-color: red !important;
}

testLWC.html

<template lwc:render-mode='light'>
    <lightning-input type="text" label="testabc" placeholder="test123" class={myClass}></lightning-input>
    <lightning-button variant="brand" label="Change Class" onclick={changeClass}></lightning-button>
</template>

testLWC.js

import { LightningElement } from 'lwc';

const CLASS_1 = 'class1';
const CLASS_2 = 'class2';

export default class TestLWC extends LightningElement {

    static renderMode = 'light';
    
    _class = CLASS_1;

    get myClass() {
        return this._class;
    }

    changeClass(event) {
        console.log()
        if(this._class == CLASS_1) {
            this._class = CLASS_2;
        } else {
            this._class = CLASS_1;
        }
    }
}

testLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

You must log in to answer this question.

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