Drop Down Option Styling

Anvil Q&A
1

What I’m trying to do:
I’m trying to update the CSS for drop down options. I have been successful in updating the styling of the drop down options generally, but completely unable to update the “hover” styling. It always remains the blue background and white lettering.

What I’ve tried and what’s not working:
I have added these lines to the CSS

note: I have all of the variable colors in a :root {}

Code Sample:

option {
    background-color: var(--surface);
    color: var(--on-surface);
}

option:hover, {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
}

Drop Downs still look like this with the above code:

drop_down_option_on_hover
drop_down_option_on_hover1293×145 6.6 KB

2

Have you tied hard coding the colours to css values to check if it is the CSS or the CSS variable?
I have a feeling it is something to do with the CSS code and selecting the write class (?) but my CSS kung fu is not strong

option:hover, {
    background-color: limegreen !important;
    color: purple !important;
}
3

Yeah, I tried some of the built-ins with no luck. The odd thing is that I can change the background and foreground color over all, it’s just the hover action that won’t work.

4

Oh I think I see it, you have a comma after hover - is that meant to be there? (untested)

5

No, that must have been a remnant from something I was testing. However, even with it removed, it still doesn’t seem to work.

6

This might be helpful

I presume this is a bootstrap dropdown so you could try adding some of the elements from that example?

7

Anvil’s builtin DropDown component uses the browser’s native <select> and <option> elements.

There is no real way to style the <option> elements of a <select> element.
Any solutions don’t typically work cross-browser or cross-platform.

Here’s an example of the same question at stackoverflow, which might provide more context:

css - How to style the option of an HTML select element? - Stack Overflow

If this is important to your app, you might find the anvil-extras multi-select dropdown works for you. It doesn’t use the browser’s native select element and the options can therefore be styled. Though you’ll have to play around with dev tools to work out exactly what css you need to change.

2 Likes
8

That was the conclusion I came to as well. Fortunately, this exercise was mostly due to my subtle perfectionism getting the best of me.

Regardless, I appreciate your assistance.