Style html select option values

Question

I am trying to adjust the styles of selected option field in select element but not able to customise the selected value style.

1. Like below is my select option with correct style:

2. Other styles like hover are fine but selected one is not changing even though I tried different scenarios. Here you can see select is showing with blue background. What style I need to apply to change it.

My code is:

.fix-input__select {
  display: block;
  font-size: 16px;
  line-height: 20px;
  color: var(--brand-green, #32C850);
  width: 100%;
  /* height: 40px; */
  padding: 10px;
  background-color: var(--spid-background-color);
  border: none;
  border-bottom: 1px solid var(--border-gray);
}

.fix-input__select option {
  /* box-shadow: 0 0 10px 100px #1882A8 inset; */
  color: var(--gray);
  height: 30px;
  padding-top: 8px;
  background-color: var(--spid-background-color);
}

.fix-input__select option:checked {
  /* box-shadow: 0 0 10px 100px #1882A8 inset; */
  color: var(--brand-green, #32C850);
  background-color: var(--spid-background-color);
}

.fix-input__select option:hover {
  /* box-shadow: 0 0 10px 100px #1882A8 inset; */
  color: var(--gray);
  box-shadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.12);
  background: var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  /* background-color: var(--border-gray); */
}

<select
    class="fix-input__select"
    id="otp"
    type="dropdown"
    required
    onfocus="this.size=3;"
    onblur="this.size=0;"
    onchange="this.size=1; this.blur()"
>
    <option value="0">Select</option>
    <option value="1">1saas</option>
    <option value="2">2asas</option>
    <option value="3">3asas</option>
</select>

Please suggest what style I am missing.

Answer 1

As far as I know there is no way to change selected option background color using CSS. This color is defined by operating system/browser you are using - Basic native form controls. I can suggest using external JS libraries like Select2 or create your own custom dropdown imitating native select and store value in hidden input for example.