2

Not a duplicate question, Question is 'how to apply custom css to only one lightning input without affecting css of any other lightning input elements.

I am trying to apply custom css to lightning input but it is not working.

HTML

<lightning-input class ="lastName" name="lastName" onblur={handleEmptyValidation} >

JS

export default class registration extends LightningElement {
handleEmptyValidation(event) {
            let srcElement = this.template.querySelector('.lastName');
            const style = document.createElement('style');
            style.innerText = `c-registration lightning-input input {
                border-color: #54C2B2;
                }`;
            srcElement.appendChild(style);
    }

It works when I use .slds-input instead of lightning-input input but for some reason it gets applied to all lightning-inputeven though when I am using srcElement.appendChild(style);

1
  • What is the exact requirment? Nov 7, 2019 at 16:45

1 Answer 1

1

I was able to change css only for 'lastName'

const style = document.createElement('style');
        style.innerText = `c-self-registration .lastName .slds-input {
            border-color: #54C2B2;

            }`;
        srcElement.appendChild(style);

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