Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Organizing Forms Fieldsets and Legends

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Where (and how) do we change the color of a submit button? And other things....

I would like to change the color of my form's "Submit" button. I'd also like to change the height of each of the input fields as well as the height of the submit button.

How do I do these three things?

Thanks!

3 Answers

Jacob Herper
Jacob Herper
91,103 Points

In CSS you can change the look of the submit button using

input[type=submit] { color: #...; }

This works for all types of input fields, if you want to change the hight for all input fields (no matter what the type), just use

input { ... }

I hope this helps :)

Jacob Herper and Robert Richey are probably going to throw something heavy at me for answering you this way but...it all depends on HOW you created your submit button :)

If it's an image you would have to go back into your graphic editing software (ie. PhotoShop) and change it there. If you created it using html/css (i.e.. form controls or just styling a <a> tag in an unordered list) you would want to use the color property and pseudo classes that Jacob mentioned and Robert demonstrated.

Here is a great write up on css-tricks.com about the how, when and why of pseudo classes.

Hope this helps!

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Very true! I should have specified; I forgot that our questions go into the forum and aren't just located under the specific class we are asking from, which in this case was a button created from HTML/CSS.

Now I need to figure out how to make the form email without using the "MAILTO:" (attribute? tag?) because I want the info to be processed on site and not open up the users' email client in a new window. I know this requires some extra work & server-side something or other. Do I have to use PHP? Not super familiar with it yet, but hoping to be...

Hi, Gina! Yes, PHP is good server-side language to make the form email. You need get form's info from php variables, generate message and send it.

I would be glad to help :)

Hi Gina,

Here's my CodePen illustrating how I chose to tackle the issue.

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Robert, do you mind if I ask you questions about your code via your CodePen, or should I ask in here so other students can see as well?