How to change the background and hover background color on dropdowns and multi selects in Gravity forms

Mar 17th, 2014 | By | Category: wordpress

This might be one of the more obscure solutions I post but I imagine I’ll need to reference this later and save myself the 2 hours of searching around it took me today.  So if you want to change the background color for dropdowns go into formsmain.css and go change the following:   First ot change the general background color go to line 1308:

.gform_wrapper .chzn-container .chzn-drop { background-color: #531818; border: 1px solid #AAA; border-top: 0; position: absolute; top: 29px; left: 0; -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15); -moz-box-shadow: 0 4px 5px rgba(0,0,0,.15); -o-box-shadow: 0 4px 5px rgba(0,0,0,.15); box-shadow: 0 4px 5px rgba(0,0,0,.15); z-index: 999; }

Next change the hover go find these lines(1547 & 1551):  The color needs to be changed on both of them(they are right next to each other) in order for it to take effect:

.gform_wrapper .chzn-container .chzn-results .highlighted { background-color: #000000; } .gform_wrapper .chzn-container .chzn-results li em { background-color: #000000; font-style: normal; }

I’ve changed the color to 000000 so you should just search for the first line there.. either way both colors need to be set to black there

Lastly is the color of the text within the search fields, white on white for some reason in my case so you need to go into the Theme’s style.css sheet to line 1349 and edit the color to something that will show a bit better on a white background(but at the same time needs to show on a white background.. Ah the fun

With the color fixed you need to adjust the padded at the bottom of the form so that dropdowns at the bottom don’t get cut off.  Go into the style sheet for the theme(visual) and head to line 786.  Put the bottom padding to 300 or something like that

 

 

Tags: , , , , ,

Leave a Comment