1

I want the lightning-combobox input box to be curved(border-radius: 18px).

My research and attempts:

I tried CSS for lightning-input as:

.slds-modal input[type="text"]{
    border-radius: 18px !important;
 }

and I was able to achieve this:

The input box where the field is curved

Similarily, I want the input box for lightning-combobox to be curved. I implemented css for classes - .slds-combobox__form-element, .slds-combobox but no luck.

1 Answer 1

4

Use the SLDS styling hook to override the border-radius. Add this code into the .css file of the component.

:host{
    --sds-c-input-radius-border: 18px;
}

The above code will be effective for all the nested components inside the current component, so if you want this only for specific components then you can add specific selectors for that.

CSS:

.my-cystom-input{
    --sds-c-input-radius-border: 18px;
}

HTML:

<lightning-combobox 
    name="progress" 
    label="Status" 
    value={value} 
    class="my-cystom-input"
    placeholder="Select Progress">
</lightning-combobox>

If you want to know more about Styling hooks then you can check out my blog posts on that.

SLDS Styling hooks in Lightning web components

Customize standard LWC components' with SLDS Styling Hooks

You must log in to answer this question.

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