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

432    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.

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
if(this.isCssLoaded) return
this.isCssLoaded = true;
    console.log('error to load');

Its look like this

Your Answer


Parent Categories