[Resolved] wpforms dropdown styling

[Bryan]

Where can I locate the styling for wpforms dropdown, or dropdown in general for GP? I would like to change the dropdown arrow background and I also do not like that it changes the style on mobile.

[David]

Hi there,

Select Input elements are generally styled by the browser, GP itself doesn’t intefere with them. If you can link me to the page where i can see the from i can advise on where the style is coming from.

[Bryan]

http://thecreativereload.com/contact/

[David]

So the styles you want to change are all the responsibility of the browser, and you’ll notice each browser has its own style. This stack overflow covers how to remove that from the HTML Select element:

https://stackoverflow.com/a/13968900

But to be honest they are a right pain in the backside to begin with and in addition you have the styles being applied using an ID by the WP Forms and UABB Form Styler plugin, so you would need to target those specific IDs which are:

#wpforms-814-field_4, 
#wpforms-814-field_5, 
#wpforms-814-field_6 {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; 
    /* add a background image for replacement drop down */
}

It works in the dev tools but as said they can be a pain so fingers crossed …..

[Bryan]

It’s not an issue I’ve had with other themes such as Avada. If you take a look at this contact form, the select is the same across browsers and mobile.

http://infiniteelectric.biz/about-us/careers/

[David]

That Theme or the Form plugin is applying the same CSS i provided above to remove the browser styles – see here, bottom right of image:

GP doesn’t add any CSS to change the way a form plugin should display its elements.

[Bryan]

I was able to get it to work. Thank you!

[David]

Awesome – glad to hear that

[Author]

Posts