I 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.com/

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.


closed as off-topic by Krzysiek Dróżdż, Jacob Peattie, rudtek, fuxia Jan 4 at 22:39

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


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] {

Second, the hover value:

.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected] {

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.

  • Thats worked perfectly thanks and it works when adding it onto my custom CSS in WP customize, thanks for the help. How did you find where the code was? and what the selection was? – Harvey Dec 30 '18 at 14:26
  • I knew it was Select2, which I've used in my dev work. Back in WC 2.x, I had to apply my own plugin for overriding the Select2 default CSS because it was so bad. They've improved their CSS since Automattic took over WC, but it's still marginal in some aspects. Glad that worked out for you. – butlerblog Dec 30 '18 at 22:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.