WooCommerce Country Drop Down colours CSS

admin管理员组

文章数量:1130349

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 question

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 /

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 question

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/

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,

• woocommerce-offtopic
• css
• dropdown

Share Improve this question edited Dec 27, 2018 at 19:32 butlerblog 5,14133 gold badges2828 silver badges4444 bronze badges asked Dec 27, 2018 at 17:10 HarveyHarvey 5344 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.

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 question

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 /

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 question

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/

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,

• woocommerce-offtopic
• css
• dropdown

Share Improve this question edited Dec 27, 2018 at 19:32 butlerblog 5,14133 gold badges2828 silver badges4444 bronze badges asked Dec 27, 2018 at 17:10 HarveyHarvey 5344 silver badges1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.

本文标签： WooCommerce Country Drop Down colours CSS