Can we change the color of error message in lightning-input (LWC)?

Question

I am using the following code to show input field in LWC.

<lightning-input placeholder="First"
    onchange={handleContactFieldValueChange}
    data-apiname="FirstName"
    required
    value={contactObject.FirstName}>
</lightning-input>

Can we change the color of the error message?

By default, it's red.

Answer 1

we have to override CSS of standard lwc component :

Create a CSS file and add in static resource File Content :

.slds-form-element__help {
    color: white !important;
}

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');
});
}