Customizing Colors of Drop Down Selection Fields (Country, State) in Checkout

  • Resolved darklightfx

    (@darklightfx)


    7 years, 10 months ago

    We have not been able to customize the font or background of the drop down option list that appears when users click to select their Country or State in woocommerce checkout.

    We have been using the Chrome browser inspector to look at what css classes to apply the style to, but nothing seems to have an effect.

    The url of the checkout page in question is https://darklightfx.com/checkout

    I was able to style the initial value and the selected value, but not the drop down list, which currently has a white background and light gray text that is hard to read. I’m not sure if its possible to change that white background (possibly a browser locked setting?) but I’d like to change the text to black so its easily readable at the least.

    So far I have these classes customized for the field’s initial/base color, and then the color of the text after you select an option: 

    .select2-container--default .select2-selection--single {
	background-color:hsl(0,0%,18%);
	border:0;
	color:white;
}
#select2-billing_country-container, #select2-billing_state-container, #select2-shipping_state-container, #select2-shipping_country-container {
	color:hsl(0,0%,81%);
}

    Any help is appreciated, thank you!

    • This topic was modified 7 years, 10 months ago by darklightfx.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter darklightfx

    (@darklightfx)

    Update: we were able to at least get the text to show as black in the drop down list using:
    .select2-container--open { color: black; }
    (Still seem unable to change the white background of the drop down boxes?)

    However, the text entry box inside the drop down that lets you narrow your search (for example searching for United States you would start typing “Uni” to narrow down the list of options.) Currently it is styled as dark gray with dark font and is almost unreadable.

    • This reply was modified 7 years, 10 months ago by darklightfx.
    Thread Starter darklightfx

    (@darklightfx)

    Solution for the second post – we were looking for these elements:

    .select2-search input,
.select2-search input:focus

    Using those we were able to style the search box inside the drop down with a dark background and light text.

    Then the background of this had to be set also for the area around the text input
    .select2-search

    .

    (@lutjebroeker)

    Thanks for your style fix solution.
    I had also that problem with text color.

    Here the solution for the standard :hover and highlighted blue colour of a country.

    .select2-results__option--highlighted,
.select2-results__option:hover{
	background:#ff9900 !important;
}

    without the !important it does not work.

    • This reply was modified 7 years, 7 months ago by ..

    You guys are awesome. Thanks!!! You saved me hours of research!

    Hello,

    I’m new to all this. I’m sorry if I seem like I need my hand held.

    But I am having the same problem. Both country and state/province fields have white text and white background. You can only see the options when you hover over the options.

    I’m just not sure which file to go into to modify in woocommerce. I don’t know what steps to take to add these lines of code.

    I just want the dropdown color black. The hover color doesn’t really matter as it works with our color scheme.

    Is there a plugin I could use to customize the checkout page (fields + colors)?

    if you could please visit: https://prosmokeclub.com/checkout/

    .

    (@lutjebroeker)

    Add custom css

    https://en.support.wordpress.com/category/appearance/

    @prosmokeclub
    Try this custom css:

    .select2-dropdown {
  color:#000;
}

    Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Customizing Colors of Drop Down Selection Fields (Country, State) in Checkout’ is closed to new replies.