How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

Question

How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

I've been struggling to change the default blue background color of the drop-down options when hovering over them with the mouse. Despite trying various solutions from this forum, nothing seems to be working at the moment. (These solutions used to work in older versions of Chrome) I can't seem to get option:hover to work.

Does anyone have any suggestions on how to use CSS to change the hover color to something other than blue? https://i.stack.imgur.com/uccaK.png

<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);
}

html css twitter-bootstrap

Answer 1

Answer №1

To create a simulated select box that allows for the addition of images to the options, you would need to follow certain steps.

Ultimately, the form must be submitted in order to process the selected value.

const sel = document.querySelector("#selected");
/* An array is created containing 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")) {
    /* Hide the <ul> if it's visible */
    opts.classList.remove("open");
  } else {
    /* Show the <ul> if it's hidden */
    opts.classList.add("open");
  }
});

opt.forEach((e, i, o) => {
  /* Event listener added for each option */
  o[i].addEventListener("click", () => {
    /* Value of the option stored in a variable */
    const chosen = e.querySelector("span").innerHTML;
    const opts = document.querySelector("#options");
    /* Set the selected box value to the chosen option */
    sel.innerHTML = chosen;
    /* Set the value of the option to the hidden input field */
    inp.value = chosen;
    /* 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>

Answer 2

To create a simulated select box that allows for the addition of images to the options, you would need to follow certain steps.

Ultimately, the form must be submitted in order to process the selected value.

const sel = document.querySelector("#selected");
/* An array is created containing 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")) {
    /* Hide the <ul> if it's visible */
    opts.classList.remove("open");
  } else {
    /* Show the <ul> if it's hidden */
    opts.classList.add("open");
  }
});

opt.forEach((e, i, o) => {
  /* Event listener added for each option */
  o[i].addEventListener("click", () => {
    /* Value of the option stored in a variable */
    const chosen = e.querySelector("span").innerHTML;
    const opts = document.querySelector("#options");
    /* Set the selected box value to the chosen option */
    sel.innerHTML = chosen;
    /* Set the value of the option to the hidden input field */
    inp.value = chosen;
    /* 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>

How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

Answer №1

Similar questions

Spin a Material UI LinearProgress

Angular 2: Emptying input field value on click event

Utilizing AJAX for autocomplete in HTML and inserting it into a page using innerHTML is causing issues with the functionality of forms on the website

The table is not displaying the CSS class as intended

What is the process for implementing the tooltip plugin within a modal dialog in Twitter Bootstrap?

What is the best way to hide the menu bar on a particular window using electron?

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

Change the element's color to match the default anchor link

To redirect to a webpage in PHP, incorporate nested if statements and override the meta HTML

Mastering the Art of Resizing Video Controls: A

Trouble displaying images from JSON file in AngularJS using ng-src - need help with image loading

Tips for switching a group of buttons within a userscript by clicking a single button?

Difficulty in altering the background of an input box

Populating the DOM with a mix of strings and HTMLDivElements by iterating through an array using *ngFor

How can you trigger CSS transitions to happen multiple times?

Tips for effectively utilizing innerHTML in this particular scenario

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

The actions performed within an event listener function are undone once they have been carried out

html5 Showing and hiding div elements

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code