Styling Gravity forms - drop down arrow

Gravity Support Forums » Plugin Support » Gravity Forms

robd
Member

Hello - could anyone point me in the right direction to style the arrow in the 'drop down select' box on gravity forms?

thanks in advance

Rob

Posted 12 years ago on Wednesday September 7, 2011 | Permalink
Kevin Flahaut
Administrator

The drop down arrow is part of the form control itself, it's not something you can style. Different browsers render the "select" form element differently.. selects in Safari look vastly different than those in Internet Explorer for example.

There are some scripts/CSS tricks out there that actually hide the select element and then use replacement images for different styling. A quick Google search will return a few of these but I can't really vouch for any one. You'll need a decent level of skill to implement most of them as well.

Posted 12 years ago on Wednesday September 7, 2011 | Permalink
robd
Member

Thanks Kevin, thought as much.. It would be possible if I could directly target the drop down's CSS; if I could specifically change just that width then it would work fine, and I could use the image replacement you mention. Unfortunately any amends affect all the fields on the page, so that then knocks fields out of alignment in terms of how wide they are.

The only way forward I can see is either to leave as is, or to not use Gravity and code the form myself.

Posted 12 years ago on Wednesday September 7, 2011 | Permalink
Kevin Flahaut
Administrator
each field has a unique ID so you can use CSS inheritance to target specific elements.. something like this.
```
[css]
body #gform_wrapper_1 li#field_1_1 select {width:150px}
```
You just need to view the page source, get the ID from the parent list element and work from there.
Posted 12 years ago on Wednesday September 7, 2011 | Permalink
robd
Member

Thanks - that does work, but only for the specific element in that specific page. I want to provide the site to the client such that if they in future amend their form, it will automatically follow the style for the site, which won't work in this instance. Thanks for your help though.

Posted 12 years ago on Friday September 9, 2011 | Permalink
Hiranthi
Member
If you'd like to change the styling of every dropdown, just use the following in your CSS:
```
[css]
select { width:150px }
```
Or, if you'd like to use selects in gravity forms only:
```
[css]
.gform_wrapper select { width:150px; }
```
Just as normal CSS selection of HTML elements :)
Posted 12 years ago on Friday September 9, 2011 | Permalink
robd
Member

Hi Illutic

That changes the width of every field, not just every drop down. That's the issue; Kevin's approach works but only for specific fields ( you make the width of the dropdown wider than that of a surrounding element, effectively nudging the right hand side arrow out of view. Then you put a background image of the arrow into the field, and position it far right. )

To do this automatically for all drop downs you would need a specific identifier for drop downs, as opposed to select, which amends all selectable fields.

Posted 12 years ago on Friday September 9, 2011 | Permalink
Kevin Flahaut
Administrator
@robd,

I'm really not sure what you're trying to do here. It seems like this is harder than it should be. We're just talking simple CSS inheritance to get the job done.

You can target all of the "drop-downs" which are actually called "selects" in the markup using the method @illutic suggested if you want that rule to apply to all selects in all of your forms.
```
[css]
body .gform_wrapper select { width: 150px; }
```
Conversely, you can use the unique form ID to apply this rule to only one form if you wish. Note the ID rather than the generic class used for inheritance here.
```
[css]
body #gform_wrapper_1 select { width: 150px; }
```
Or, you can even bit a bit more granular and target only the selects that are in the "complex", prearraged fields like the address, etc.
```
[css]
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex select { width: 100px; }
```
All of these can be successfully targeted for all of your forms or for just one form or fields based on inheritance from a parent element. There's no need to have a special class or "identifier" applied to the select element itself.

If you're not sure how to properly use CSS inheritance or to target the different form elements, there is a guide with examples on the following page.

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
Posted 12 years ago on Friday September 9, 2011 | Permalink
robd
Member

Both,

Apologies, I've confused myself during this process. I tried the .select tag at the start and *I swear* it amended all fields, but I was obviously mistaken. Many thanks for your help, both of you.

Rob

Posted 12 years ago on Friday September 9, 2011 | Permalink
Kevin Flahaut
Administrator

Rob, no worries man. We just want to make sure we understand the problem and try to help out. Glad you got it figured out.

Posted 12 years ago on Friday September 9, 2011 | Permalink

This topic has been resolved and has been closed to new replies.