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?

Improve this question

2 Answers 2

Reset to default
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() {

    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>
Improve this answer
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 ♦
    Commented 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?
    – Nagendra Singh
    Commented Jan 6, 2021 at 3:01
  • 5
    SLDS Hooks should solve this once it’s ready!
    – Mohith Shrivastava
    Commented 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 ♦
    Commented 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 ♦
    Commented Jan 6, 2021 at 14:33
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.

Improve this answer

You must log in to answer this question.

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