CSS Checkout Field Colour

  • Resolved harveyl12

    (@harveyl12)


    4 years, 1 month ago

    Hi,

    I’m really struggling to write some CSS which will change the colour of the hover colour when selecting from the field “How did you here about us”.

    You will need to add a product to the basket from the shop in order to see what I am trying to do or the page will not show.

    I managed to sort the country selection colours out and I would like to do the same for the new field I’ve created.

    I have tried inspecting to find the CSS i need to change but I cant find what selection I need to use.

    Please could someone help me with how I change the colour of the hover on this dropdown and the colour of the selected option as well.

    Page is [ redundant link removed ]

    The website I need help with is

    • This topic was modified 4 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    4 years, 1 month ago

    These work in the inspector tool. They ought to also work added to the Additional CSS panel of the customizer.

    #select2-billing_how_did_you_here_about_us-container:hover {
    color: green;
}
.select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] {
    color: red;
}

    Naturally you would actually use better color values.

    Thread Starter harveyl12

    (@harveyl12)

    4 years, 1 month ago

    @bcworkz thats got it somewhat there thank you, i have used your code which I have changed to change the selected option from the drop down to green.

    However I am struggling to get the background color set for when you open the drop down menu and hover over each option. When hovering over each option currently it is a blue background and I am trying to change this to green.

    I can’t ever get this section up in inspection

    Moderator bcworkz

    (@bcworkz)

    4 years, 1 month ago

    Yes, it’s tricky getting the right rules to show up because the hover color is not set by the :hover pseudo-selector but by a class added by script from mouse in/out events. The cursor over s specific element needs to leave the widow without re-triggering the script. I discovered this by accident, I’m not really that clever 🙂

    Here’s the rule to place in Additional CSS:

    .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: lightgreen;
    color: black;
}
    Thread Starter harveyl12

    (@harveyl12)

    4 years, 1 month ago

    Thats worked thanks, perfect!

    How did you manage to get it up in inspection view? I’m struggling to understand how you did it

    Moderator bcworkz

    (@bcworkz)

    4 years, 1 month ago

    Open the drop down. Open the inspection tool in its own window if it’s docked. Position it over the main window so its vertical edge overlaps the drop down content. Use the tool’s element selector to focus on one of the options that is not already selected. Bring the tool to the front. Hover over the same option. Move the cursor over into the tool without leaving the hovered option 😉

    Thread Starter harveyl12

    (@harveyl12)

    4 years, 1 month ago

    @bcworkz Ahh I’ve got you, just tested your method and figured out how you do it now.

    Thanks, that will be really useful in the future.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS Checkout Field Colour’ is closed to new replies.