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 >
        <div >
            <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  type="submit" onclick="save()">Save</button>
        </div>
        <div >iphone XR
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
        </div>
        <div >iphone 12
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
        </div>
        <div >iphone 13
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
            <i ></i>
        </div>

    </div>

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

CodePudding user response：

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 >
    <div id="selected">Select an option</div>
    <ul id="options">
      <li ><img src="https://via.placeholder.com/50/00ff00"><span>Option 1</span></li>
      <li ><img src="https://via.placeholder.com/50/ff0000"><span>Option 2</span></li>
      <li ><img src="https://via.placeholder.com/50/0000ff"><span>Option 3</span></li>
    </ul>
  </div>
</form>