It is possible using CSS to change the color of an item from an option input field when hover over?

Question

I made this options input field:

My code is this:

#input-diametru {
  background-color: #59253b;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  width: 67px;
  height: 37px;
  appearance: none;
  /* Remove default arrow */
  background-image: url("/Arrow\ Down\ Bold\ Icon.svg");
  /* Add custom arrow */
  background-repeat: no-repeat;
  background-position: 43px;
}

<select name="input-diametru" id="input-diametru">
  <option value="0"></option>
  <option value="10C">10C</option>
  <option value="12">12</option>
  <option value="12C">12C</option>
  <option value="13">13</option>
  <option value="13C">13C</option>
  <option value="14">14</option>
  <option value="14C">14C</option>
  <option value="15">15</option>
  <option value="15C">15C</option>
  <option value="16">16</option>
  <option value="16C">16C</option>
  <option value="17">17</option>
  <option value="17.5">17.5</option>
  <option value="17C">17C</option>
  <option value="18">18</option>
  <option value="18C">18C</option>
  <option value="19">19</option>
  <option value="19.5">19.5</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="22.5">22.5</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="60">60</option>
</select>

When a user goes with the mouse over an option, the background color of that option turns blue, as you can see in the picture above. I want to change that color from blue to #79244D for example. Is there a way to do that in CSS?

I found this answer on w3schools, but this involves using JS.

Does this answer your question? [Change Select List Option background colour on hover](https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) — ATP, Dec 31 '20 at 13:10
@Ruxandra: Yes you will need to use Javascript to do this :) For this particular code !!! — Imran Rafiq Rather, Dec 31 '20 at 13:23

score 2 · Answer 1 · answered Dec 31 '20 at 13:55

Tested on Chrome Version 87.0.4280.88 and Microsoft Edge 44.18362.329.0 ONLY .

If you add height to your select , this will not work.

#input-diametru {
  background-color: #59253b;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  width: 67px;
  /* height: 37px; */
  appearance: none;
  background-image: url("/Arrow\ Down\ Bold\ Icon.svg");
  background-repeat: no-repeat;
  background-position: 43px;
}

option:hover {
  background-color: #79244D;
}

<select name="input-diametru" id="input-diametru" onfocus="this.size=10;" onblur="this.size=0;" onchange="this.size=1; this.blur();">
  <option value="0"></option>
  <option value="10C">10C</option>
  <option value="12">12</option>
  <option value="12C">12C</option>
  <option value="13">13</option>
  <option value="13C">13C</option>
  <option value="14">14</option>
  <option value="14C">14C</option>
  <option value="15">15</option>
  <option value="15C">15C</option>
  <option value="16">16</option>
  <option value="16C">16C</option>
  <option value="17">17</option>
  <option value="17.5">17.5</option>
  <option value="17C">17C</option>
  <option value="18">18</option>
  <option value="18C">18C</option>
  <option value="19">19</option>
  <option value="19.5">19.5</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="22.5">22.5</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="60">60</option>
</select>

It is possible using CSS to change the color of an item from an option input field when hover over?

1 Answers1