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>
<option value="2: Major Impact - Critical Component">
2: Major Impact - Critical Component
</option>
<option value="3: Minor Impact - Causing Inconvenience" selected="true">
3: Minor Impact - Causing Inconvenience
</option>
<option value="4: No Impact - Information Request">
4: No Impact - Information Request
</option>
</lightning:select>
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;
}