Increase submit button size in chrome

You can target the next and previous buttons like this:

[css]
body .gform_page_footer input.gform_next_button {
    color: green;
}

body .gform_page_footer input.gform_previous_button {
    color: red;
}

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?

True

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?

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:

[php]
<div class='gform_footer left_label'> <input type='submit' id='gform_submit_button_62' class='button gform_button' value='Submit' tabindex='43' />

You could target this one button on this one form with an id specific rule, like this:

[css]
#gform_submit_button_62 {
	font-size: 20px;
	padding: 20px;
	color: green;
}

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.)

So, to be more generic and give all your form submit buttons the same style, you could target by class:

[css]
input['submit'] .gform_button {
	font-size: 20px;
	padding: 20px;
	color: green;
}

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:

[css]
body .gform_wrapper form .gform_footer input['submit'] .gform_button {
	font-size: 20px;
	padding: 20px;
	color: green;
}

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.

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!

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.

Here is some documentation on CSS specificity which is what we're using to ensure our rules "win". http://css-tricks.com/specifics-on-css-specificity/

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.

Rocketgenius is in Virginia Beach Virginia, but I do support for them from Chicago, Illinois. It's not too late here :-)