https://legacy.forums.gravityhelp.com/topic/styling-submit-button Gravity Support Forums Topic: Styling submit button en-US Sat, 04 Apr 2026 15:44:01 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64376 Mon, 02 Jul 2012 11:25:04 +0000 daviddesrocher 64376@https://legacy.forums.gravityhelp.com/ <p>Oh, duh! Haha. Sorry Rob, I see the field ID now. Not sure how I missed that. This can be closed and thanks so much for your help! </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64375 Mon, 02 Jul 2012 11:23:37 +0000 daviddesrocher 64375@https://legacy.forums.gravityhelp.com/ <p>Thank you Rob. My apologies for one more question, but that is how I how I presumed to do field-specific targeting. I just am not sure where to look when editing a form to know a field's ID# (or, is it just logical? The first field is field 1, second is field 2, etc.)? </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64373 Mon, 02 Jul 2012 11:18:13 +0000 Rob Harrell 64373@https://legacy.forums.gravityhelp.com/ <p>That does cover all of the text-based inputs that we use. If you did want to target a specific input - that is when you would then use the ID on the input or the ID on the li to target that element.</p> <p>So either input#fieldid1 or li#fieldid1 input[type="email"] - this would be a hypothetical example. </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64370 Mon, 02 Jul 2012 11:12:40 +0000 daviddesrocher 64370@https://legacy.forums.gravityhelp.com/ <p>Nailed it! (and the type was mine because I told you #gform_input_4 in my original post).</p> <p>Just so I understand, does the input[type="variable"] that you used cover all of the GF types possible? I just want to understand so that I can choose to target specific types later.</p> <p>And, for my further education, let's say I had two email fields and I wanted to target a specific one in CSS to change border or background, how do I target a specific instance of a specific type? </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64367 Mon, 02 Jul 2012 11:00:34 +0000 Rob Harrell 64367@https://legacy.forums.gravityhelp.com/ <p>Dude, I apologize - my snippet was incorrect, should have been #gform_wrapper_4 instead of #gform_input_4 (that doesn't even exist - was just a typo on my part). At any rate let's review here. Right now you have this:</p> <pre><code>[css] #gform_wrapper_4 input { background-color: black !important; border-color: #313131 !important; }</code></pre> <p>Instead of that, replace it with this to target only these input types:<br /> <pre><code>[css] #gform_wrapper_4 input[type=&quot;text&quot;], #gform_wrapper_4 input[type=&quot;url&quot;], #gform_wrapper_4 input[type=&quot;email&quot;], #gform_wrapper_4 input[type=&quot;tel&quot;], #gform_wrapper_4 input[type=&quot;number&quot;], #gform_wrapper_4 input[type=&quot;password&quot;] { background-color: black !important; border-color: #313131 !important; }</code></pre> <p>Then use just this for the submit button:</p> <pre><code>[css] #gform_submit_button_4 { background-color: #fff; color: #000 !important; }</code></pre> <p><a href="http://www.evernote.com/shard/s212/sh/65149ac0-6b50-49a5-bcbb-3e81ced37bcd/a0c9474ff28c5d6dfa667a716284a833" rel="nofollow">Screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64363 Mon, 02 Jul 2012 10:53:51 +0000 daviddesrocher 64363@https://legacy.forums.gravityhelp.com/ <p>No changes, but, I also noticed that I was using #gform_wrapper_4 rather than the #gform_input_4</p> <p>So my actual code (with your changes above) is as follows (note that I did try it with your code above as well with no changes to submit button). Ultimately what I want to learn to do is to target the type attribute specifically, but I failed in all my efforts to do so. If you can show me an example of how to do that, it'll probably prevent me from asking styling questions in the future because that is the power I would prefer to have over the specific fields...</p> <pre><code>#gform_wrapper_4 input{ background-color:#000000 !important; border-color:#313131 !important; } #gform_input_4 #gform_submit_button_4 { background-color:#ffffff !important; color:#000000 !important; }</code></pre> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64359 Mon, 02 Jul 2012 10:25:13 +0000 Rob Harrell 64359@https://legacy.forums.gravityhelp.com/ <p>This should do the trick for you:</p> <pre><code>[css] #gform_input_4{ background-color:#000000 !important; border-color:#313131 !important; } #gform_input_4 #gform_submit_button_4 { background-color:#ffffff !important; color:#000000 !important; }</code></pre> <p>You could alternatively target your input's by the type attribute which would then, not affect the submit input. </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64358 Mon, 02 Jul 2012 10:22:38 +0000 daviddesrocher 64358@https://legacy.forums.gravityhelp.com/ <p>Bottom right footer. Thanks for any help Rob. <a href="http://emergerbanquet.com/" rel="nofollow">http://emergerbanquet.com/</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64353 Mon, 02 Jul 2012 10:15:54 +0000 Rob Harrell 64353@https://legacy.forums.gravityhelp.com/ <p>Could you post a link to your form? </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-button#post-64352 Mon, 02 Jul 2012 10:05:58 +0000 daviddesrocher 64352@https://legacy.forums.gravityhelp.com/ <p>Due to a minor conflict with my theme, when I use a form in the footer widget I have to style it to make it look perfect. I'm trying to style the submit button to have a white background and black letters - whereas my form fields have black background and white letters. I've inserted the code below, but I am doing something wrong because the first string is taking over the submit button specific code. By itself, the submit code works, and the other code works as well, but together the submit specific code is ignored or "overruled" by the first code. Any advice?</p> <pre><code>#gform_input_4{ background-color:#000000 !important; border-color:#313131 !important; } #gform_submit_button_4 { background-color:#ffffff !important; color:#000000 !important; }</code></pre>