I have a lightning web component and on it I have


I want to change some of the styling so on the input and so I have this on the css portion of the component.

.slds-input:focus, .slds-input:active {
    outline: 0;
    border-color: rgb(255, 0, 0);
    background-color: rgb(255, 255, 0);
    box-shadow: 0 0 5px rgb(0, 255, 0);

Nothing changes. Does anyone know what I need to do to get the style to use the CSS I have supplied?

2 Answers 2


As input element of lightning-input-field gets generated dynamically and because of shadow dom concept you cannot reach that input element via lwc css file. This can be achieved by loading a separate css class via loadStyle api

Create a zip folder activeClassZip and add a css file to it activeClassCSSFile.css

Now the css file should have only this :

/* activeClassCSS */
.activeClass .slds-input:focus{
    outline: 0;
    border-color: rgb(255, 0, 0);
    background-color: rgb(255, 255, 0);
    box-shadow: 0 0 5px rgb(0, 255, 0);

Now in your custom component js, just load this css file via:

import {loadStyle} from 'lightning/platformResourceLoader'
import activeClassZip from '@salesforce/resourceUrl/activeClassZip'

renderedCallback() {

        loadStyle(this, activeClassZip + '/activeClassCSSFile.css')

and add this class in your html like this:

    <lightning-input-field class="activeClass" field-name={Email} variant="label-hidden"></lightning-input-field>
  • 3
    Be aware that, at some point in time, this trick will stop working. Right now, we only have faux shadow DOM, but the real thing won't allow tricks like this.
    – sfdcfox
    Jan 6, 2021 at 2:48
  • But is there an official way to override the css, of this gets stopped. I mean we have done this in lot of places. Also used aura to load css separately to override some of lwc and aura components css and also hide some standard buttons. Will aura loading css be also stopped? Jan 6, 2021 at 3:01
  • 5
    SLDS Hooks should solve this once it’s ready! Jan 6, 2021 at 3:09
  • 1
    @NagendraSingh There will be an official path at some day, but be aware that this is not the path. At least, you should document your usage of this trick.
    – sfdcfox
    Jan 6, 2021 at 4:58
  • 1
    @PrashantKashyap Correct. Again, I expect we'll have some path forward, but it won't be as simple as wrapping in an Aura component and overriding. These are all things that only work with the faux Shadow DOM we have today.
    – sfdcfox
    Jan 6, 2021 at 14:33

As @Mohith mentioned Styling hooks are the official way. You can achieve the same with

    --lwc-colorBorderInputActive: rgb(255, 0, 0);
    --lwc-colorBackgroundInputActive: rgb(255, 255, 0);
    --lwc-shadowButtonFocus: 0 0 5px rgb(0, 255, 0);

Also, Styling hooks are still in beta so maybe there could be changes to the property conventions. Read more able SLDS Hooks here.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .