apply CSS to attribute of lightning input

Question

Problem Statement:

I am trying to apply custom CSS to a lightning-input component inside a nested structure. However, neither external CSS nor inline styles seem to work, even with the !important tag.

HTML Code:

<div>
    <div>
        <div class="custom-label">
            <lightning-input label="enter input"></lightning-input>
        </div>
    </div>
</div>

CSS Code:

.custom-label .slds-form-element__label { 
    font-size: 16px; 
    color: red; 
    font-weight: bold;
}

Issue:

The CSS styles I applied are not being reflected in the component. I tried using the !important tag, but it still doesn’t work. Questions:

Why is the custom CSS not being applied to the lightning-input label? How can I correctly apply custom styles to lightning-input labels? What I Have Tried:

Ensured that the CSS file is properly included and linked. Used the !important tag, but it still didn’t work. Additional Context:

I am using this component inside a Salesforce Lightning Web Component (LWC). Is there a special way to apply custom CSS to standard Lightning components?

Thank you!

Answer 1

It doesn't work due to Shadow DOM features:

CSS styles defined in a parent component don’t leak into a child

That's why you cannot change the style of a standard component setting just the CSS for a specific class, even if you use !important.

Anyway, several standard components use var(--token-name) function and CSS custom properties to customize their styling, i.e. font-size: var(--lwc-formLabelFontSize, 0.75rem);.
In such cases you'll be able to override those styles setting the right custom properties, see Styling Hooks.

In your case, you could override font-size and color for the input label:

:host .custom-label {
    --lwc-formLabelFontSize: 16px;
    --slds-g-color-neutral-base-30: red;
}