[Resolved] Change checkout country selection background color

Home Forums Support [Resolved] Change checkout country selection background color

Home Forums Support Change checkout country selection background color

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1453160
    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!

    #1453166
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1453170
    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.

    #1453202
    Elvin
    Staff
    Customer Support

    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.:)

    A wise man once said:
    "Have you cleared your cache?"

    #1453660
    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!

    #1454423
    Elvin
    Staff
    Customer Support

    Nice one.

    No problem.:)

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.