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

Aligning text to the center and having it displayed on either side of it

Can a new frame be created below an already existing frame in HTML?

The controls for the HTML audio component are missing the download option on Safari

An unexpected background image appearing from an external CSS file

Delivering HTML with Python Socket Server

problem with saving session data

Steps to implement an image zoom function triggered by a button click

Implementing a distinct approach to adding margins to div boxes using

Using a JavaScript loop to modify the color of the final character in a word

Using an iframe to access HTTP content from an HTTPS website

Video player on website experiencing issues with playing VAST ads

How to properly format credit card input using JavaScript or jQuery

CSS shimmer effect does not smoothly transition between borders

What causes the Footer to appear as a floating element in Tailwind CSS?

Concealing the path of a file input in CSS

Setting up Visual Studio Code for debugging HTML and JavaScript code

Text is not visible when hovering over it

The absence of a meta tag in the Wordpress head section

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Vue 3 throws an error stating: "An uncaught DOMException occurred because the string contains an invalid character."