Bold just label in lightning combobox

Question

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;
}

Answer 1

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.