applying css to inner elements of lightning-input lwc

Question

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

<template>
    <template for:each={test} for:item="f">
        <lightning-input  style="border: 3px solid red"
            value="test" key={f.Id} data-id={f.Id} variant="label-inline" label="test" title="test">

        </lightning-input>
    </template>
    <button class="slds-button slds-button_brand">Submit</button></div>
</template>

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

Answer 1

As per SLDS guideline, it's easier to add required attribute to lightning-input base component:

<lightning-input required="true"
    value="test" key={f.Id} data-id={f.Id} 
    variant="label-inline" label="test" title="test">
</lightning-input>

This adds asterisk sign (*) next to input denoting it's required:

When input is touched and not filled in, on leaving input; form marks the input as dirty and shows the red border:

Answer 2

<lightning-input class="customInput" type="text" label="Enter some text"></lightning-input>

we have to override CSS :

Create a CSS file and add in static resource

File Content :

.customInput .slds-input{
    border-color: 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

Answer 3

You can use CSS styling hooks for that. For your specific requirement you can use the below one.

--slds-c-input-color-border : red

You can add a custom CSS class to your lightning-input tag and add the above styling hook to that class.