How to apply css to inner elements of lightning input lwc?

935 Asked by Aashishchaursiya in Salesforce , Asked on Apr 18, 2023

I am trying to add border colour to the lightning-input lwc component. First when i tried the below css

enter image description here

The issue here is I want the border to be exact on the input not around it. Please let me know how it is possible for lightning-input lwc.

Answered by Aashish chaursiya

To apply css to inner elements of lightning input lwc -



we have to override CSS :

Create a CSS file and add in static resource

File Content :

.customInput .slds-input{

    border-colour: red;

}

Import That static resource file in your component

import { loadStyle } from 'lightning/platformResourceLoader';

import CUSTOMCSS from '@salesforce/resourceUrl/{yourfileName}';

a) Define variable like : isCssLoaded = false;

Call it in reRenderCallback

renderedCallback(){

if(this.isCssLoaded) return

this.isCssLoaded = true;

loadStyle(this,CUSTOMCSS).then(()=>{

    console.log('loaded');

})

.catch(error=>{

    console.log('error to load');

});

}

Its look like this

How to apply css to inner elements of lightning input lwc?

Your Answer