1

I have a lightning web component and on it I have

<lightning-input-field 
    field-name="Resource__c" 
    onchange={onResourceSelection} 
    data-lookup-id="temResourceLookup"
    value={resourceRecId}
    variant="label-hidden">
</lightning-input-field>

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

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

.slds-input:active{
    --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.

1

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() {

    Promise.all([
        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>
9
  • 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 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? – Nagendra Singh Jan 6 at 3:01
  • 5
    SLDS Hooks should solve this once it’s ready! – Mohith Shrivastava Jan 6 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 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 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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