https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field Gravity Support Forums Topic: Dropdown menu same style as text field en-US Mon, 20 Apr 2026 02:35:35 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59260 Thu, 17 May 2012 09:55:33 +0000 Rob Harrell 59260@https://legacy.forums.gravityhelp.com/ <p>You're not going to be able to universally apply this and have it exact because that select field you will most likely need to target individually. But you could try something like:</p> <pre><code>[css] .gform_wrapper .right_label input.medium, .gform_wrapper .right_label select.medium, .gform_wrapper .left_label input.medium, .gform_wrapper .left_label select.medium { font-size: 16px!important; width: 80%!important; box-sizing: content-box !important; padding: 3px!important; height: 20px; }</code></pre> <p>Here is the documentation on how the structure is laid out.</p> <p><a href="http://www.gravityhelp.com/documentation/page/Design_and_Layout" rel="nofollow">http://www.gravityhelp.com/documentation/page/Design_and_Layout</a></p> <p>You can also use tools such as chrome developer tools and firebug for firefox to inspect the elements and target them as you wish. </p> https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59255 Thu, 17 May 2012 08:58:11 +0000 Ulrich 59255@https://legacy.forums.gravityhelp.com/ <p>Thanks, box-sizing: content-box was the solution</p> <p>I was trying to simplify the css and ruined everything. Could you tell me which class or id to use. I would like this to work for all of my forms.<br /> I would like to use use this style for all of fields except the submit button and...<br /> font-size: 16px!important;<br /> width: 80%!important;<br /> box-sizing: content-box;<br /> padding: 3px!important;<br /> ...this is for the text field.<br /> height: 20px; </p> https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59252 Thu, 17 May 2012 08:10:14 +0000 Rob Harrell 59252@https://legacy.forums.gravityhelp.com/ <p>Yeah I don't think you're going to be able to match that up exactly, besides the contents of the drop down doesn't really need to be that wide anyways to accomodate prefixes. At any rate, you can isolate and try to target that field individually with:</p> <pre><code>[css] #input_1_4 { width: 79% !important; -webkit-appearance: none; box-sizing: content-box; }</code></pre> <p>You can also try taking off some of the browser-defined styles like the one example above.</p> <p>Edit: This is pretty close for webkit at least. <a href="http://www.evernote.com/shard/s212/sh/4c51b6f8-3460-4cfc-b823-1925098739a6/6cff08837d558c87934432a1f6c1ee61" rel="nofollow">Screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59249 Thu, 17 May 2012 08:07:31 +0000 Ulrich 59249@https://legacy.forums.gravityhelp.com/ <p>I have now only a 2px difference between the input fields and the select and text field.</p> <p>This is my test site.<br /> <a href="http://www.grappler.tk/dyebeta/contact" rel="nofollow">http://www.grappler.tk/dyebeta/contact</a> </p> https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59240 Thu, 17 May 2012 07:49:46 +0000 Rob Harrell 59240@https://legacy.forums.gravityhelp.com/ <p>Select elements are pretty tough to style uniformly, cross-browser as most of the styling is dictated by the browser. Do you have a link to your form so I can see what you have so far? </p> https://legacy.forums.gravityhelp.com/topic/dropdown-menu-same-style-as-text-field#post-59234 Thu, 17 May 2012 05:18:02 +0000 Ulrich 59234@https://legacy.forums.gravityhelp.com/ <p>Hello,</p> <p>I would like the dropdown menu to look the same as the the text field. How can I best achieve this?</p> <p>I change both of the width to 100% but the dropdown menu is still 10px smaller.</p> <p>Thank you </p>