CSS Hover on Option Makes Text Disappear

Can’t figure out why a select option item disappears on hover (Country Field). Can anyone guide me on how I can troubleshoot this (use a physical product)?

You probably set the direction of the hover too far out, so it ends up going out of view.

Well lucky me, I didn’t. The items are there but it seems to be a problem with the tag color is set to white and the background color on the section area is white as well. Can’t seem to get my code to override it.

Not sure if this is what you meant but it changed colour for me straight away?

.options li:hover{color:red}

might need to tack in a !important if it’s not being live-loaded (or applied at the element level) just to make sure it sticks through whatever other CSS that wordpress is sticking into it…

thing about these fancy ‘select box replacement’ things is that finding the code in-situ for the replacement is virtually impossible…making replicating and tracking the change with the dev tools annoying…

select2 is being used to generate the dropdown. Specifically, this CSS rule is the one being applied:

.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #0073aa;
    color: #fff
}

(select2.css, lines 399-403)

No I believe I gave the correct CSS :). That rule is for the dropdown that is being replaced (no one will see it). :wink:

Odd…yesterday, I swear it wasn’t applying the style from the li. shrug whatever works!

1 Like

I wound up using jQuery to redevelop how the dropdown list was displaying the data and then used CSS to style it better. Thank you for your help, guys! It was quite the struggle.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.