Styling the Submit button

Thanks for the suggestion. We decided to leave the button elements un-styled so they would just inherit the default browser button styles, or any the user might already have in place in the theme.

We have discussed offering some additional styling options or form 'skins' if you will, but haven't implemented any of that to date.

For now, here's the styles we used on the forum buttons. You can grab the background image for the button here

input[type=submit], input[type=button] {
	background-color: #b1b1b1;
	border: 1px none #707070;
	color: #636363;
	font-weight:bold;
	text-shadow: 0px 1px 1px #fff;
	background-image:url(images/buttonbg.png);
	background-repeat:repeat-x;
	background-position:bottom;
	padding: 3px 4px;
	line-height: 14px;
	font-size: 13px;
	margin: 0;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

You'll want to make sure the image path is correct for your application and you can format the CSS to your preference.

Also, in case you're not aware of it, you can also create a form button graphic and apply it directly via the form settings in the admin.

screenshot: form image button settings

David,

You should be able to do this now with a little CSS inheritance. The entire form is wrapped in a div with class "gform_wrapper" so you can target the individual elements inside there.

.gform_wrapper input.button { color:#222 }
if you want to get a little more granular, the main submit button is in a div with the class "gform_footer" so you could use that to target the button if you preferred.

.gform_footer input.button { padding:3px }
Let me know if that doesn't work for you for some reason.

We can also look into adding a custom class to the button to make things even easier in the future. Thanks for the suggestion.

You can do this now using the "gform_submit_button" filter. Here's another topic with an example.

http://forum.gravityhelp.com/topic/styling-the-submit-button-1#post-7367

We may add the capability to the admin in a later version, but you can use that filter to manipulate the submit button anyway you want. Just be sure to keep the "id" value on the button so it still works properly with conditional logic, etc.

Not sure if there's a filter to change the input itself.. I'll have to double check on that. You can usually effect changes with inheritance from the parent <li > element.

li.mycustomclassname input {margin:0}
li.mycustomclassname select {margin:10px}

You could use the same method to target the field with jQuery if you really wanted to append a class name to the input itself... something like this..

<script type="text/javascript">
jQuery(document).ready(function() {
 		jQuery("li.mycustomclassname input").addClass("myinputclass");
	});
</script>

or directly using the input id like this..

<script type="text/javascript">
jQuery(document).ready(function() {
 		jQuery("#input_1_4").addClass("myinputclass");
	});
</script>