Change "blue" background color of drop down options <option> upon mouse hover?

Issue

I'm looking for a way to change the default blue background color of the drop-down options upon mouse hover. I've tried to follow quite a few solutions over this forum, but nothing seems to work as of now.(The solutions used to work earlier in old version of Chrome) option:hover doesn't work.

Can anyone suggest how to achieve color other than blue through CSS ?

<div class="starComponent">
        <div class="product">
            <select name="product" id="phone">
                <option value="">Product</option>
                <option value="iPhoneXR">iPhone XR</option>
                <option value="iPhone12">iPhone 12</option>
                <option value="iPhone13">iPhone 13</option>
            </select>
            <input type="number" placeholder="Rating" size="8" min="0" max="5" id="rating">
            <button class="btn btn-dark" type="submit" onclick="save()">Save</button>
        </div>
        <div class="stars1">iphone XR
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
            <i class="fa-regular fa-star xr_star"></i>
        </div>
        <div class="stars2">iphone 12
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
            <i class="fa-regular fa-star 12_star"></i>
        </div>
        <div class="stars3">iphone 13
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
            <i class="fa-regular fa-star 13_star"></i>
        </div>

    </div>

option:hover{
    background-color: rgb(152, 173, 173);
    color: rgb(189, 85, 85);
}

Solution

You would need to simulate a select box in which case you could even add images to the options, should the need arise.

In the end, the form needs to be submitted in order to process the chosen value.

const sel = document.querySelector("#selected");
/* Create an array with the options */
const opt = [...document.querySelectorAll(".option")];
const inp = document.querySelector("#sel");

sel.addEventListener("click", () => {
  const opts = document.querySelector("#options");
  if (opts.classList.contains("open")) {
    /* If the <ul> is visible, hide it */
    opts.classList.remove("open");
  } else {
    /* If the <ul> is hidden, show it */
    opts.classList.add("open");
  }
});

opt.forEach((e, i, o) => {
  /* Add an event listener for each option */
  o[i].addEventListener("click", () => {
    /* Store the value of the option in a variable */
    const chosen = e.querySelector("span").innerHTML;
    const opts = document.querySelector("#options");
    /* Assign the value of the option to the select box */
    sel.innerHTML = chosen;
    /* Assign the value of the option to the hidden input field */
    inp.value = chosen;
    /* And close the <ul> */
    opts.classList.remove("open");
  });
})

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

#selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

#selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

#options {
  display: none;
  margin: 0;
  padding: 0;
}

#options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li:hover {
  background-color: yellow;
}

li>img {
  margin-right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div id="selected">Select an option</div>
    <ul id="options">
      <li class="option"><img src="https://via.placeholder.com/50/00ff00"><span>Option 1</span></li>
      <li class="option"><img src="https://via.placeholder.com/50/ff0000"><span>Option 2</span></li>
      <li class="option"><img src="https://via.placeholder.com/50/0000ff"><span>Option 3</span></li>
    </ul>
  </div>
</form>

Answered By - Gerard