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

1.7K 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

Your Answer

Answer (1)

Ranjana

To apply CSS to inner elements of a Lightning Web Component (LWC) like lightning-input, you can make use of the ::shadow pseudo-element and CSS selectors to target specific elements within the component's shadow DOM. However, it's important to note that directly styling inner elements of standard Lightning components is not recommended, as it can lead to unexpected behavior and issues with compatibility and maintainability. It's generally preferred to use standard component attributes and styling hooks provided by the Lightning Design System (SLDS) whenever possible.

That said, if you still need to apply custom CSS to inner elements of a lightning-input, here's a general approach:

Inspect the Component Structure: Use your browser's developer tools to inspect the HTML structure of the lightning-input component. This will help you identify the specific elements you want to style within its shadow DOM.

Create a CSS File: Create a CSS file in your LWC component's directory where you can define your custom styles.

Target Inner Elements with CSS: Use CSS selectors to target the inner elements within the lightning-input component. You can use the ::shadow pseudo-element to pierce through the shadow DOM boundary and style the inner elements. For example:

/* Example of styling the input field within a lightning-input */

lightning-input ::shadow input {

    /* Your custom styles for the input field */

}

Replace input with the specific element you want to style, such as label, div, or span, depending on the structure of the lightning-input component.

Import CSS File into Component: Import the CSS file into your LWC component's JavaScript file using the @import statement or link to it directly in your component's HTML file using .

Apply Styles: Once you've defined your custom CSS rules, they will be applied to the inner elements of the lightning-input component when it's rendered.

Again, it's important to exercise caution when directly styling inner elements of standard Lightning components, as it may have unintended consequences and could cause issues with platform updates or future releases. Whenever possible, prefer using the styling hooks provided by SLDS or consider creating a custom LWC if you need more control over styling.

6 Months