Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 6 years ago.
Improve this questionI have been trying to change the colours for the selected and hovered country in the country dropdown on the checkout page on a web site I am developing which is /
No matter what I try in Google Chrome developer tools, I can't seem to find the CSS that is controlling the colour of these elements.
To see what I mean go to the web page and add something to the basket. Then go to the checkout. It is the 'Country' drop down where the hover colour is blue and selected is grey.
I want to change this but for the life of me cannot figure it out.
Any help is appreciated.
Thanks,
Closed. This question is off-topic. It is not currently accepting answers.Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 6 years ago.
Improve this questionI have been trying to change the colours for the selected and hovered country in the country dropdown on the checkout page on a web site I am developing which is http://chi-medics/
No matter what I try in Google Chrome developer tools, I can't seem to find the CSS that is controlling the colour of these elements.
To see what I mean go to the web page and add something to the basket. Then go to the checkout. It is the 'Country' drop down where the hover colour is blue and selected is grey.
I want to change this but for the life of me cannot figure it out.
Any help is appreciated.
Thanks,
It's part of the "Select2" library, which is a jQuery replacement for select fields. You'll find the stylesheet in /assets/css/select2.css in the WooCommerce plugin folder.
The following are the property definitions you'll find as the defaults for each of the items you mentioned.
First, the selected value:
.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true] {
background-color:#ddd
}
Second, the hover value:
.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected] {
background-color:#0073aa;
color:#fff
}
Since these are part of a library included in the plugin, if you're going to override them, it's best to do so either by loading a completely custom stlyesheet of your own, or something outside the plugin. The simplest would be to just use the WP Customizer.
When you are logged in, in the WP Toolbar (at the top of the screen), select "Customize". When the Customizer opens, select "Additional CSS". Add the properties above and set the background color and font color (simply "color") accordingly. Click "Publish" and your custom stlyes will load inline.