Selector color

  • Resolved mygreenfootprint

    (@mygreenfootprint)


    5 years, 8 months ago

    Hi I’m trying to format the state drop down box on the checkout page.

    I’d like to change the border color, the color of the drop down arros and also the highlight color when an option is selected.

    Please see attached. I have been able to change the background color but there is a second color in blue and I can’t work out how to change this..

    https://prnt.sc/o44v3v

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Fernando a11n

    (@fhaps)

    Automattic Happiness Engineer

    Hi @mygreenfootprint,

    Could you share the link to your website? So we can take a look at the CSS on that page and see fi we can make any suggestions.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    Hi Fernando

    https://mygreenfootprint.com.au/

    Plugin Support Fernando a11n

    (@fhaps)

    Automattic Happiness Engineer

    The site is under a coming-soon wall, so we are unable to access the checkout page.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    Apologies I thought I turned it off for you to have look.will do so later today and let you when done.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    Hi Fernando,
    should be good to go now.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    Hi Fernando,
    any luck with this one?

    /* border colour */
:focus {
  outline-color: #006400 !important;
}
/* highlighted item */
.woocommerce-checkout select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected],
.woocommerce-checkout .select2-container--default .select2-results__option--hover [data-selected] {
  background-color: #006400 !important;
  border-bottom-color: #006400 !important;
  border-top-color: #006400 !important;
}

    The drop-down arrows are encoded images. It would be necessary to make a new image of the desired colour and encode it, then add that to the styles. Its beyond a forum answer for me.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    Thank you Lorro!!!!!!!

    Plugin Support Fernando a11n

    (@fhaps)

    Automattic Happiness Engineer

    Just saw you received an awesome CSS snippet from @lorro! Glad this has been solved.

    Closing this thread now.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Selector color’ is closed to new replies.