How to Change the Hover Background Color of a Dropdown Option in Angular? [duplicate]

I’ve been struggling to find the perfect solution to change the hover background color of a dropdown option in an Angular form. By default, the dropdown options display a blue background on hover, but I need to change that color to pink.

Here is the HTML structure of my form:

<div class="form-group">
  <label for="supportHierarchy">Support Hierarchy</label>
  <select id="supportHierarchy" [(ngModel)]="flag.supportHierarchy" name="supportHierarchy" class="form-control custom-select">
    <option class="custom-option" [value]="'Yes'">Yes</option>
    <option class="custom-option" [value]="'No'">No</option>
  </select>
</div>

And here is the CSS I’ve been trying:

option:hover,
option:checked,
option:active,
option:focus {
  background: linear-gradient(#5a0c6f, #5a0c6f);
}

.custom-option:hover,
.custom-option:checked,
.custom-option:active,
.custom-option:focus {
  background: linear-gradient(#5a0c6f, #5a0c6f);
}

.custom-option:hover {
  background-color: red !important;
}

Issues:
The above CSS only works if the dropdown is already open (for example, if I set the size attribute on the element to force the dropdown to stay open).
The hover effect does not seem to apply when the dropdown is closed, which is the main issue I need to solve.
I’ve tried various approaches and scoured multiple solutions online, but none seem to work for my requirement.

References:
Changing hover background color with javascript
How to change the background color of a select option on hover

Question:
How can I effectively change the background color of the dropdown options on hover, so that it displays the desired color (pink) when the dropdown is open and being interacted with? Any help or alternative approach would be appreciated!