[Resolved] Styling hover color of WooCommerce product drop down

[Dominique]

Hi,

I can’t figure out how to style the hover color of the product drop down menu. I figured it out for the checkout page though.

The blue is making me cringe every time I see it and is completely out of the website design.

I would like to achieve hovering background #000000 and the text #f4da60 all the other colors as they are.

Please advise

[Dominique]

Notify me of follow-up replies via email again 🙂

It should be pre-selected 😉

[Elvin]

Hi there,

This is pretty tricky to do as the select/option list is usually rendered by the OS. While you can attempt to style with :checked pseudo class, I don’t think you’d get the desired style.

This is actually why some sites resort to scripting + <ul> <li> elements for their dropdowns because that is easier to style.

[Dominique]

Hi,

Euh WHAT???

I did achieve to style the WHOLE website exactly how I wanted to.

A lot of it is by trial error. It’s extremely time consuming. https://www.w3schools.com/ helps a lot.

Basically most of the time I don’t know what I’m doing. Eventually it ends up doing what I want. When I’m really stuck I ask GeneratePress support for help.

Does it have something to do with the flux capacitor in the warp core Scotty?

Jokes aside, how do I get rid of that stupid hover blue and on edge another color. It can’t be more complicated than doing the same that I did in the navigation menu for dropdowns.

Please advise

[David]

Hi there,

as Elvin pointed out the SELECT input box is defined by the Device OS / Browser.
For example if you were to open the site on a iOS device you would see a different select input method – its no longer a dropdown but a scrolling element that makes the browser UI.

There is no way to change the styles of that element using CSS.
It would require custom development or a plugin to insert a ‘fake’ select element in its place.

[Dominique]

Hi,

OK it seems to be dependant on the type of dropdown menu that is used on the product page that is from the appointments plugin and not directly WooCommerce.

In WooCommerce on the checkout page the type of dropdown menu used seems to be the right type that has

• as Elvin mentioned.

  I was able to style the dropdown menus for country & province. Only problem is that when a country is already selected and it is hovered on it becomes white. How do I keep #000000 black background with the #f4da60 gold text when it is hovered?

  Please advise

[Dominique]

Hi,

OK it seems to be dependant on the type of dropdown menu that is used on the product page that is from the appointments plugin and not directly WooCommerce.

In WooCommerce on the checkout page the type of dropdown menu used seems to be the right type that has <ul> <li> as Elvin mentioned.

I was able to style the dropdown menus for country & province. Only problem is that when a country is already selected and it is hovered on it becomes white. How do I keep #000000 black background with the #f4da60 gold text when it is hovered?

Please advise

[Dominique]

This is the code that I have:

/* WooCommerce checkout dropdowns */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e5e4e2;
  background-color: #343434;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #f4da60;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #000000;
  color: #f4da60;
}

.select2-results__option[aria-selected], .select2-results__option[data-selected] {
  background-color: #343434;
}

[David]

How do i get to a checkout / product page where i cans see the Select ? The original link and any links that may suggest a purchase take me to the 404 page

[Dominique]

Hi,

Find a step by step in private information.

Weird that you got 404.

It’s actually the color of the selected country changes instead of staying the same when other countries are hovered.

[Elvin]

For the hover color:

.select2-container--default .select2-results__option[aria-selected=true]{
background-color: green;
}

For the selected color:

.select2-container--default .select2-results__option[data-selected=true]{
background-color: blue;
}

[Dominique]

Hi,

Revised code with the missing :hover in you code if it can help anybody else:

/* WooCommerce appointment validation dropdowns */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e5e4e2;
  background-color: #343434;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #f4da60;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #000000;
  color: #f4da60;
}

.select2-results__option[aria-selected], .select2-results__option[data-selected] {
  background-color: #343434;
}

.select2-container--default .select2-results__option[aria-selected=true]:hover{
background-color: #000000;
color: #f4da60;
}

.select2-container--default .select2-results__option[data-selected=true]{
background-color: #000000;
color: #f4da60;
}

Thanks for your help.

[Elvin]

Good catch. Glad you got it sorted. 🙂

[Author]

Posts