Wanted to share this with the community for future google searches. Gravity Forms provides a CSS targeting page that helps you with CSS.
Our website is starting a free CSS snippets library you can copy and paste from. We will go over some more CSS targeting examples with more specific styling in mind.
If you have any requests, ask them here!
Would be great if you could include a snippet to make dropdowns using the advanced UI look like regular dropdowns. It blows my mind the GF would use two totally different styles for those fields, different dropdown icon, etc.
Hi Scott, the CSS for the enhanced UI requires multiple lines of CSS referencing several different selectors. As a more simple solution, I might suggest simply disabling the enhanced UI for the field’s dropdown. Gravity Forms should have this option for any field that offers the enhanced UI option.
Well, yes, you could disable it but my point is we like to use it in our forms. Not having the CSS match the standard dropdown makes little sense since it really doesn’t have to be.
Could you explain why you prefer the enhanced drop down yet still prefer the styling of the non enhanced drop down?
Perhaps I can help some if I understand correctly.
Consistency. If you have normal dropdowns for short list of items and a dropdown with a long list of items (where search is of benefit) you have two fields sitting on top of each other that look totally different. Different height, font size, dropdown image, background colour, padding, border colour, everything.
It’s a small thing, but details matter, and I find it looks terrible to have two dropdowns looking like they belong to separate applications in the same form.
Thx
Different height, font size, dropdown image, background colour, padding, border colour, everything.
I didn’t want to leave you hanging here. Just given the scope of making the enhanced UI dropdowns match the default drop-downs, I’d have to defer you to hire out for this one. As I said before there are multiple selectors for styling the enhanced interface fields and matching them to look like the default drop-downs would take time.
If you know CSS and want to try styling yourself, I can send you a message and provide you with all of the CSS selectors you would need!