Selector color

  • Resolved mygreenfootprint

    (@mygreenfootprint)


    6 years, 11 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

    6 years, 10 months ago

    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)

    6 years, 10 months ago

    Hi Fernando

    https://mygreenfootprint.com.au/

    Plugin Support Fernando a11n

    (@fhaps)

    Automattic Happiness Engineer

    6 years, 10 months ago

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

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    6 years, 10 months ago

    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)

    6 years, 10 months ago

    Hi Fernando,
    should be good to go now.

    Thread Starter mygreenfootprint

    (@mygreenfootprint)

    6 years, 10 months ago

    Hi Fernando,
    any luck with this one?

    Peter Lawrenson

    (@lorro)

    6 years, 10 months ago

    /* 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)

    6 years, 10 months ago

    Thank you Lorro!!!!!!!

    Plugin Support Fernando a11n

    (@fhaps)

    Automattic Happiness Engineer

    6 years, 10 months ago

    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.