https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome Gravity Support Forums Topic: Increase submit button size in chrome en-US Sun, 19 Apr 2026 19:57:01 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75257 Fri, 14 Sep 2012 00:13:05 +0000 Chris Hajer 75257@https://legacy.forums.gravityhelp.com/ <p>Rocketgenius is in Virginia Beach Virginia, but I do support for them from Chicago, Illinois. It's not too late here :-) </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75255 Thu, 13 Sep 2012 23:58:14 +0000 zephyrpoint 75255@https://legacy.forums.gravityhelp.com/ <p>This is awesome... and you work late! Aren't you on the east coast? Thanks for your quick reply, Chris. You guys certainly make it easy to come for help. I will certainly be recommending Gravity Forms when the opportunity arises. </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75254 Thu, 13 Sep 2012 23:52:55 +0000 Chris Hajer 75254@https://legacy.forums.gravityhelp.com/ <blockquote><p>Okay. Those worked great. I am learning that a more specific selector such as input.gform_next_button will override a less specific selector such as input.button, correct?</p></blockquote> <p>True</p> <blockquote><p>Now I just need to know the more specific selectors. Can you tell me how to specifically target the "submit" button and the "choose file" button on the file upload form field?</p></blockquote> <p>Because you're going to be doing this a lot, I would recommend getting familiar with how to find the class or id of the element you want to target. Take a look at the source of the rendered page where the form was embedded (just load the page in your browser and "view source".) Search the page for some text which uniquely identifies the item you want to style (like "next" or "previous" or "submit".) Here's what I found in the source of my page when I went looking for the "Submit" button:</p> <pre><code>[php] &lt;div class=&#39;gform_footer left_label&#39;&gt; &lt;input type=&#39;submit&#39; id=&#39;gform_submit_button_62&#39; class=&#39;button gform_button&#39; value=&#39;Submit&#39; tabindex=&#39;43&#39; /&gt;</code></pre> <p>You could target this one button on this one form with an id specific rule, like this:<br /> <pre><code>[css] #gform_submit_button_62 { font-size: 20px; padding: 20px; color: green; }</code></pre> <p>But that will only work for the submit button on this one form. Note that an ID is prefixed with the hash mark in your stylesheet (#gform_submit_button_62). Classes are more generic (you can have multiple elements on a page with the same class: the ID must be unique and used on only one element in the form.)</p> <p>So, to be more generic and give all your form submit buttons the same style, you could target by class:<br /> <pre><code>[css] input[&#39;submit&#39;] .gform_button { font-size: 20px; padding: 20px; color: green; }</code></pre> <p>That will give any submit input element with the class (prefix with a . for a class) .gform_button your custom style. However, this is not a very specific rule. We want our custom rule to always "win" so we need to make it more specific. If you look at the source of the web page, you will see that it's a series of nested elements. You can chain these elements together and come up with a very specific rule, which will still apply to all your Gravity Forms. Looking at the source of my page, I find I can do this, based on where the form is located in my page:<br /> <pre><code>[css] body .gform_wrapper form .gform_footer input[&#39;submit&#39;] .gform_button { font-size: 20px; padding: 20px; color: green; }</code></pre> <p>Now we have a very specific rule which should win out over any less generic rule, and not affect any other buttons on your site.</p> <blockquote><p> By the way, is there another place I could be looking to learn this stuff, too? I don't mind searching... I kinda like it sometimes. Is it written into a .css file somewhere in the /plugins/gravityforms directory? I didn't find anything about a "submit" button in forms.css (or a "gform_next_button" or "gform_previous_button" for that matter). Cheers!</p></blockquote> <p>I've never looked at the forms.css file. I don't know what rules are written there. I just follow the procedure above to find a very specific chain of elements that I can use to ensure my rule is more specific than any other rule which might be present in a theme stylesheet or even in the Gravity Forms forms.css.</p> <p>Here is some documentation on CSS specificity which is what we're using to ensure our rules "win". <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">http://css-tricks.com/specifics-on-css-specificity/</a></p> <p>There are other tools which make finding the class and ID easier, but this is a good way to start. Just remember that classes use a period in your style rule, and ids use a hash mark. If you get stuck on something, post a link to where you applied it online and we'll check it out for you. </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75250 Thu, 13 Sep 2012 23:34:13 +0000 zephyrpoint 75250@https://legacy.forums.gravityhelp.com/ <p>Okay. Those worked great. I am learning that a more specific selector such as input.gform_next_button will override a less specific selector such as input.button, correct? Now I just need to know the more specific selectors. Can you tell me how to specifically target the "submit" button and the "choose file" button on the file upload form field? </p> <p>By the way, is there another place I could be looking to learn this stuff, too? I don't mind searching... I kinda like it sometimes. Is it written into a .css file somewhere in the /plugins/gravityforms directory? I didn't find anything about a "submit" button in forms.css (or a "gform_next_button" or "gform_previous_button" for that matter). Cheers! </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75207 Thu, 13 Sep 2012 20:20:16 +0000 Chris Hajer 75207@https://legacy.forums.gravityhelp.com/ <p>You can target the next and previous buttons like this:</p> <pre><code>[css] body .gform_page_footer input.gform_next_button { color: green; } body .gform_page_footer input.gform_previous_button { color: red; }</code></pre> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75192 Thu, 13 Sep 2012 19:30:40 +0000 zephyrpoint 75192@https://legacy.forums.gravityhelp.com/ <p>Okay... I'm getting a little more direction from this post from Chris Hajer: </p> <p><a href="http://www.gravityhelp.com/forums/topic/next-and-submit-button-styling" rel="nofollow">http://www.gravityhelp.com/forums/topic/next-and-submit-button-styling</a></p> <p>BUT now my question is how do I style the Next, Previous, and Submit buttons separately? The <code>.gform_wrapper input.button {...</code> CSS Chris mentioned in the other post styles all of the buttons. I searched for "next" and "previous" in forms.css trying to find the class name for those buttons without success (don't worry - I'm not making my changes in forms.css). Thanks! </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-75190 Thu, 13 Sep 2012 19:10:28 +0000 zephyrpoint 75190@https://legacy.forums.gravityhelp.com/ <p>I'm pretty new to CSS, and I'm having trouble with the size of my form buttons too. After several attempts, I managed to increase the font-size, but now, just like developyourenglish, I'm having a padding problem with the button. I figured that since the font-size changed, the padding would too, but no luck. Also, the font-size only changed on the submit button of the form, and not the next and previous buttons. Any help? My form is here:</p> <p><a href="http://zephyrpoint.org/conference-guest-evaluation" rel="nofollow">http://zephyrpoint.org/conference-guest-evaluation</a> </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-46029 Tue, 10 Jan 2012 18:18:15 +0000 Rob Harrell 46029@https://legacy.forums.gravityhelp.com/ <p>Actually, we have the browser selectors built in now. Sorry about that. If you view the source you can see at the top of the wrapper it will show you the current browser you are using as part of the class:</p> <p><a href="http://grab.by/bxrL" rel="nofollow">http://grab.by/bxrL</a></p> <p>You can use that to get more specific with your submit button selector. Sorry, that completely slipped my mind here! </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-46015 Tue, 10 Jan 2012 17:34:36 +0000 Ulrich 46015@https://legacy.forums.gravityhelp.com/ <p>I had already tried that but there was still a difference between IE and Chrome. I think I will try this tip from Kevin unless you have a better solution</p> <p><a href="http://www.gravityhelp.com/forums/topic/ie-safari-chrome-discrepencies" rel="nofollow">http://www.gravityhelp.com/forums/topic/ie-safari-chrome-discrepencies</a> </p> https://legacy.forums.gravityhelp.com/topic/increase-submit-button-size-in-chrome#post-46003 Tue, 10 Jan 2012 17:07:09 +0000 Rob Harrell 46003@https://legacy.forums.gravityhelp.com/ <p>Sorry, I just provided you with a way to target that particular submit button. Font-size was just an example. You can use padding as well, or whatever other CSS declarations you want. You would want to place this into your theme's stylesheet.</p> <pre><code>[css] #gform_submit_button_1 { padding: 5px; }</code></pre> <p>If you want to target all submit buttons in GF, you could use a less specific selector:</p> <pre><code>[css] .gform_wrapper .gform_footer input[type=&quot;submit&quot;] { padding: 5px; }</code></pre> <p>You have a reset rule in your stylesheet that is setting the padding to 0. </p>