The project I'm working on uses both Aura and LWC frameworks. The dropdown list of the two frameworks is quite different. i.e. when hovering on an option, aura highlights the option as grey and LWC highlights it as light blue.

Is there a straightforward way to match the styles or do I have to use a CSS way to match them (I can only change the styling on the Aura side)?

<lightning:select aura:id="case_severity_1" label="Severity" name="Severity" onchange="{!c.handleSeverityChange}" required="true" >
              <option value="1: Critical Impact - Production Service">
                1: Critical Impact - Production Service
              <option value="2: Major Impact - Critical Component">
                2: Major Impact - Critical Component
              <option value="3: Minor Impact - Causing Inconvenience" selected="true">
                3: Minor Impact - Causing Inconvenience
              <option value="4: No Impact - Information Request">
                4: No Impact - Information Request

I tried something like changing the CSS, but the 'hover'

.THIS option {
    font-family: "Arial", sans-serif;
    font-weight: bold;
    /* Add any other desired styling */
.THIS option:hover {
    font-weight: lighter;
    background-color: yellow;

1 Answer 1


You can use lightning combo box instead of select. It is easy to manage and also not showing light blue colour on hover.

As you can see in below image

enter image description here

You must log in to answer this question.

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