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

CSS

Posted by Derek Vha
Derek Vha
10,452 Points

CSS - Forms

Hi All,

I am just having a play around with Forms. So in my HTML I have:

  <form class = "form">
    Enter Your Name <input type = "text"  name="name">

  <br><br>


    Enter Your Email Address <input type = "text" name="email">
  <br><br>

  <textarea name ="message" rows="10" cols="50">Enter Your Message Here  
  </textarea>
  <br><br>
    <input type="submit" value="Submit">
  </form>

Now I am trying to get the form text box longer in width.

I thought something like this would work in my CSS:

.form{ width = 100%; }

But that does not work. I later found that the following does work:

input[type=text] { width: 100%; padding-left: 20px; padding-top 10px; }

My question is my does my class selector not work for forms.

Thankyou

1 Answer

Rhys Kearns
Rhys Kearns
4,976 Points

Your class selector is selecting a element that is simply grouping your inputs together, they help with specificity - so if i had more inputs i would put a form around them so i can select them more specifically like 

.signUpForm input[type = "text"] {

}

instead of 

input[type = "text"] {

}

Which would select every input on the site :) Hope this helps