0

I have created an LWC that will be embedded via Lightning Out in a website. I need to apply the styling of the website to the LWC and I am almost done. One thing to do is to change the border of the active form element from blue to orange. I managed to do for input fields, checkboxes and radio buttons. See example: enter image description here

However, the combo box doesn't work. It is still blue: enter image description here

Here is the code of the combo box:

        <lightning-layout-item size="12" medium-device-size="6" padding="horizontal-small">
            <lightning-combobox class="bdy"
                                name={fields.Country.apiName}
                                required="true"
                                label={Country.label}
                                options={countries}
                                onchange={handleCountryChange}>
            </lightning-combobox>
        </lightning-layout-item>

And here are the styling hooks I have used so far:

:host {
    --slds-c-input-color-border-focus : #fe9d6d;
    --slds-c-input-radius-border : 0rem;
    --slds-c-input-shadow-focus : none;

    --lwc-colorBackgroundInputCheckboxSelected: #fe9d6d;
    --lwc-colorBorderInputActive : #fe9d6d;

    --slds-c-radio-mark-color-foreground : #ff5a00;
    --slds-c-radio-color-border-focus : #fe9d6d;

    --slds-c-checkbox-mark-color-foreground : #ff5a00;
    --slds-c-checkbox-shadow-focus : 0 0 3px #fefbe5;
    --slds-c-checkbox-color-border-focus : 60 #fe9d6d;
    --slds-c-checkbox-shadow : 0 0 3px #fefbe5;;
    --slds-c-checkbox-radius-border :0rem;

    --slds-c-button-brand-color-background : #ff5a00;
    --slds-c-button-brand-color-border : #ff5a00;
    --slds-c-button-brand-color-background-hover : #ff7933;
    --slds-c-button-brand-color-border-hover : #ff7933;
    --slds-c-button-radius-border : 0rem;
    --slds-c-button-line-height : 3rem;

    --slds-c-textarea-radius-border : 0rem;

    --lwc-colorTextLabel: black;
    --lwc-fontSize3 : 15px;

    --lwc-formLabelFontSize : 15px;
    --lwc-shadowButtonFocus : 0 0  3px #fe9d6d;
}

Does anybody know how to get rid of that blue border? Or change it to orange without rounded corners?

1 Answer 1

0

Searching for .slds-combobox__input:focus in the latest SLDS CSS file shows that the token you should use is --slds-g-color-brand-base-60.
If #fe9d6d is the color you want, just add --slds-g-color-brand-base-60: #fe9d6d; in your css file and it should work. If the border radius doesn't change, add --lwc-borderRadiusMedium: 0; too. By the way, when setting 0 as value there is no need to add the unit.

The minimum set for achieving orange square border against a combobox is:

:host {
    --slds-g-color-brand-base-60: #fe9d6d;
    --lwc-shadowButtonFocus: 0 0 3px #fe9d6d;
    --slds-c-input-radius-border: 0;
}
1
  • thank you very much for your reply. Unfortunately this doesn't change the behaviour. If I tab away to the next input field and then tab back to the combobox, there is still a blue border. Commented Mar 25 at 12:52

You must log in to answer this question.

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