[Resolved] Change checkout country selection background color

[Lucas]

Hi there, I’m new to WordPress and GP and I’m trying to create my first WooCommerce using GP Premium.

I’m currently using GP 3.0 Beta 2.

I found that the drop-down is using Body text color, but since my background color is black and my text is white I’m getting white text with white background in the drop-down.
https://ibb.co/gtsf1Hb Dropdown

https://ibb.co/d21Ly4F – Changing body text color

How can I change text color for this drop-down to black? Do I need to set a custom CSS for that? Can you help me out?

Thanks in advance!

[Elvin]

Hi Lucas,

Can you link us to the site in question? You can add it on the Private information text box.

I found that the drop-down is using Body text color,

Note: While this may work. This may not be desirable since it can affect other child element text inside body. It just happened to work because your dropdown inherited this style from it.

As for styling dropdowns. It really depends how the dropdown was structured.

Some do this by divs with scripts, while others use <form> <option> <select>.

If your dropdown is using forms, I believe you can style them on Appearance > Color > Forms.

[Lucas]

Hi, thanks for the quick reply. I added the link to the store in private section.

I’m not looking to do anything fancy and would prefer to keep it simple, just need the text to be black as the drop-down background color is white.

This is default checkout page from WooCommerce, I assume it is using forms but since I’m new to this WordPress I’m not 100% sure.

[Elvin]

I’ve checked and found that you may have to write custom CSS for this.

You can try these CSS codes.

/* For Dropdown font color */
.select2-container--default .select2-selection--single .select2-selection__rendered {
background-color: red;
    color: white;
}

/* For Dropdown Selected option */
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: red;
    color: white;
} 

/* For Dropdown Selected option */

.select2-results__option {
    background-color: red;
    color: white;
}

/*For Dropdown Search */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    background-color: red;
    color: white;
}

/*For Dropdown Search */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: none;
    background-color: pink;
    color: green;
}

/*For Dropdown Search "margin-border" */
.select2-search--dropdown {
    background-color: red;
    color: white;
}

Just change the background-color and color values to the color you prefer. Let me know if I missed anything.:)

[Lucas]

Hi Elvin.

Thanks for the complete CSS, this one got the problem solved.
/* For Dropdown Selected option */
.select2-results__option {
color: black;
}

Great support!

[Elvin]

Nice one.

No problem.:)

[Author]

Posts