2

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>

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

1
  • You cannot style the inner markup of lwc standard components, only way is either use css hooks or load exteral style sheet.
    – Damecek
    Sep 3, 2022 at 20:19

3 Answers 3

4

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:

enter image description here

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

enter image description here

3
<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 enter image description here

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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