https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow Gravity Support Forums Topic: Styling Gravity forms - drop down arrow en-US Tue, 21 Apr 2026 14:57:59 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34928 Fri, 09 Sep 2011 11:09:20 +0000 Kevin Flahaut 34928@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34925 Fri, 09 Sep 2011 10:58:00 +0000 robd 34925@https://legacy.forums.gravityhelp.com/ <p>Both,</p> <p>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.</p> <p>Rob </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34915 Fri, 09 Sep 2011 08:40:33 +0000 Kevin Flahaut 34915@https://legacy.forums.gravityhelp.com/ <p>@robd,</p> <p>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.</p> <p>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. </p> <pre><code>[css] body .gform_wrapper select { width: 150px; }</code></pre> <p>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.</p> <pre><code>[css] body #gform_wrapper_1 select { width: 150px; }</code></pre> <p>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.</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex select { width: 100px; }</code></pre> <p>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.</p> <p>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.</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34910 Fri, 09 Sep 2011 05:18:49 +0000 robd 34910@https://legacy.forums.gravityhelp.com/ <p>Hi Illutic</p> <p>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. )</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34909 Fri, 09 Sep 2011 04:55:36 +0000 Hiranthi 34909@https://legacy.forums.gravityhelp.com/ <p>If you'd like to change the styling of every dropdown, just use the following in your CSS:</p> <pre><code>[css] select { width:150px }</code></pre> <p>Or, if you'd like to use selects in gravity forms only:</p> <pre><code>[css] .gform_wrapper select { width:150px; }</code></pre> <p>Just as normal CSS selection of HTML elements :) </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34908 Fri, 09 Sep 2011 04:51:08 +0000 robd 34908@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34715 Wed, 07 Sep 2011 14:29:22 +0000 Kevin Flahaut 34715@https://legacy.forums.gravityhelp.com/ <p>each field has a unique ID so you can use CSS inheritance to target specific elements.. something like this.</p> <pre><code>[css] body #gform_wrapper_1 li#field_1_1 select {width:150px}</code></pre> <p>You just need to view the page source, get the ID from the parent list element and work from there. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34703 Wed, 07 Sep 2011 12:23:06 +0000 robd 34703@https://legacy.forums.gravityhelp.com/ <p>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. </p> <p>The only way forward I can see is either to leave as is, or to not use Gravity and code the form myself. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34685 Wed, 07 Sep 2011 10:07:22 +0000 Kevin Flahaut 34685@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/styling-gravity-forms-drop-down-arrow#post-34683 Wed, 07 Sep 2011 09:58:32 +0000 robd 34683@https://legacy.forums.gravityhelp.com/ <p>Hello - could anyone point me in the right direction to style the arrow in the 'drop down select' box on gravity forms?</p> <p>thanks in advance</p> <p>Rob </p>