Dropdown menu css trick won't work

I want to change the dropdown field of my form. I tried all the CSS tricks I could think of, but it didn’t work-out. Even with the choices out of the element selector of chrome or safari. The standard field comes with a blue shadow when you activate the dropdown list. I want the same look-and-feel as the other fields. How can I change this color and How can I change the color of the background of the dropdown list. I just want this to be white.

To see it: form

Who has the amazing trick that I didn’t see yet?

Hi Karina. I think the difficulty comes from the fact that you are using the enhanced interface on those dropdowns. Those are notoriously difficult to style, as the standard drop down is replaced with the enhanced functionality. I will leave this open in case anyone has experience successfully styling the enhanced interface dropdowns.

Hi Chris,

If I check-out the enhanced interface option. It should be possible? Because also without that option I can’t style the border and background. I could style the font-size.

Hi Karina. The browser select box is pretty hard to style in general. Do you want to put a regular select into a form, and embed that in a page on your site? If you do that, share the URL and we’ll take a look and see what styles can be applied.

Sounds like you need to add !important at the end of your css. With the enhanced user interface styling you are probably battling inline styles. Inline styles always trump style sheets or the customizer.

background-color: #ffffff !important;
© 2008 - 2021. Gravity Forms is a project by Rocketgenius Inc.