1

Hi i would like to bold JUST the label for the lightning combobox via LWC but not the entire picklist values.

This is my code below. I tried both css and also slds-class options but no luck..

    <lightning-combobox   
                name="Name"
                label="Name"
                placeholder="Select a Name"
                options={names}
                onchange={handleName}
                style="width:100px" 
                class="strong-text">
    </lightning-combobox>

css

.strong-text {
    font-weight: bold;
}
1
  • I just found a way to do it like this where i put variant ="label-hidden" and then make priority stand-alone . the only thing is the font size and color doesn't completely match the other labels on the page (there are radio options on the page too) ``` <b>Priority</b> <lightning-combobox name="Name" label="Name" placeholder="Select a Name" options={names} onchange={handleName} style="width:100px" variant="label-hidden"> </lightning-combobox> ``` Commented Feb 2, 2023 at 15:27

1 Answer 1

3

For the most simple variant you can modify the html file like this, using the form element component blueprint from SLDS

<div>
    <label class="custom-combobox-label slds-form-element__label">Combobox label</label>
    <lightning-combobox label="Choose an option" options={options} onchange={handleSelection}
                variant="label-hidden">
    </lightning-combobox>
</div>

and the component's css file like this

.custom-combobox-label .slds-form-element__label {
  font-weight: bold;
}

Thinking for the future use and many different inputs on the page you can create a static resource file with styling overrides and load it in your component. Overriding css from the LWC component won't work because lightning-combobox is a separated component which is a child in a hierarchy compared to your component that hosts it, so LWC doesn't support styling inheritance from parent to child LWC.

2
  • Great thank you so much! this one works as well!! I appreciate the future use options as well Commented Feb 2, 2023 at 15:40
  • 1
    You're welcome @DigitalWoman Commented Feb 2, 2023 at 15:40

You must log in to answer this question.

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