https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom Gravity Support Forums Topic: Styling submit buttom en-US Mon, 20 Apr 2026 08:24:10 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19607 Mon, 28 Feb 2011 20:06:19 +0000 Kathyj 19607@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin... I had actually tried that but I had just used the last selector as input.button and it hadn't worked ... all's well now thanks. I now need to apply more styling to the page and form... I may be back! </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19602 Mon, 28 Feb 2011 18:46:35 +0000 Kevin Flahaut 19602@https://legacy.forums.gravityhelp.com/ <p>You can try using the important declaration if you need. It's better if you just use better CSS specificity.</p> <p>You just need to be more specific with your CSS inheritance to override the other rules. You have to step it down from the parent ID's and classes.</p> <p>Try adding this to the end of your custom CSS</p> <pre><code>body.custom #container #page #content_box #content .post_box .format_text .gform_wrapper .gform_footer input[type=submit].button { color: #fff; border: 5px solid green; background-image: none; background-color: blue; }</code></pre> <p>test screenshot: <a href="http://grab.by/9dfs" rel="nofollow">http://grab.by/9dfs</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19598 Mon, 28 Feb 2011 18:33:20 +0000 Carl Hancock 19598@https://legacy.forums.gravityhelp.com/ <p>@kathyj Try using the !important declaration after each style you set in your custom CSS to force it to use that. What could be happening is depending on the order the CSS is loaded, your CSS is being overridden by the other styles you have in place. Be sure to place your custom CSS at the very end of your themes stylesheet and use the !important declaration after each style you apply. In your example above you use !important after the width declaration, apply it to every single style declaration. </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19590 Mon, 28 Feb 2011 17:54:15 +0000 Kathyj 19590@https://legacy.forums.gravityhelp.com/ <p>Its seems that the customization that I have done for the front page button is overriding my ability to customize the submit button... Any other suggestion s or should I just make an image? </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19586 Mon, 28 Feb 2011 17:30:46 +0000 Kathyj 19586@https://legacy.forums.gravityhelp.com/ <p>dosen't work </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19584 Mon, 28 Feb 2011 17:28:59 +0000 Kathyj 19584@https://legacy.forums.gravityhelp.com/ <p>No Carl that is the default style for the button in the theme which is overiding the form button I will try you r code now give me a moment </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19581 Mon, 28 Feb 2011 17:17:42 +0000 Carl Hancock 19581@https://legacy.forums.gravityhelp.com/ <p>You would target the submit button with this CSS selection:</p> <p>#gform_wrapper_6 .gform_footer .button {YOUR CSS HERE}</p> <p>It looks like you have already styled the form on that page. It appears styled to me with rounded corners, etc. </p> https://legacy.forums.gravityhelp.com/topic/styling-submit-buttom#post-19579 Mon, 28 Feb 2011 17:10:51 +0000 Kathyj 19579@https://legacy.forums.gravityhelp.com/ <p><a href="http://www.tricitypsychology.com/blog/contact-us/" rel="nofollow">http://www.tricitypsychology.com/blog/contact-us/</a></p> <p>Hi I seem to be having a problem styling the submit button I have tried several selectors but to no avail<br /> this is what I am have currently any suggestions?</p> <pre><code>#gform_wrapper_6 input.button {     -moz-border-radius:0 ; -moz-box-shadow:0; background-color: #E3E3E3;      border-color: #CCCCCC #999999 #999999 #CCCCCC;      border-style: double;      border-width: 2px;      color: #111111;      cursor: pointer;      font-family: Verdana;      font-size: 9px;      overflow: visible;      padding: 0.313em 0.85em;      width: auto !important; text-shadow:none; }</code></pre>