Css of the dropdown menu

Hello!

I really struggle with cssing my form and I am looking for help. I added my custom class name to the dropdown menu and I’d like to change it to look completely different.

While I actually can change the look of the select itself and background color of options, I cannot change paddings, margins etc. I would like to change hover’s background colour to orange from blue, use pointer inside the dropdown as well as on the select (which works now).

1 Like

Sorry for double but I cannot upload 2 pics. I would like the dropdown to look like this just with orange background on hover

Hello Dawid. Styling the select element is notoriously difficult and not all styles can be applied. Take a look at this article:

Can you share a link to the page on your site where we can see the dropdown and see what is possible? Thank you.

Hello Dawid. In addition to what Chris said about styling select elements, I would also encourage you to consider not making such a change. CSS is very cool, and it can be hard to resist the urge to use it just for the cool factor, but consider that many browsers and devices have default style settings for various elements based on best practices that were developed after many years of research into usability and accessibility. For example, I would have a difficult time with an orange background and I have my browser defaults set to a contrast that make it easier for me. If your stylesheet attempts to override my defaults, it would leave me cranky.

While I am a huge proponent of stylish forms I also believe that often simpler is better. I encourage you to seek to understand best style practices first before you decide what NEEDS to be changed, and keep all users in mind, even those with vision issues.

You will want to append :hover to the CSS class. Then background-color:orange;

Without a link to the form it will be difficult to know the exact CSS you need.

See example below.

.dropdown:hover {
background-color:orange !important;
}

Please note: the above CSS is only meant to show you syntax.

You can also check out my fivverr gig for styling gravity forms. Have someone else do your styling