WooCommerce Country Drop Down colours CSS [closed]

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.