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 CSS Selectors Selectors - Beyond the Basics Styling Form Buttons and Links with Attribute Selectors

Jakub Tyczyński
Jakub Tyczyński
3,310 Points

There is no type="button", so why do we traget it?

I've noticed that teacher target type="button", for adding a coursor:pointer, while there is no such type in the index.html. Removing this selector has no effect, coursor pointer is still there on all buttons. So what is the purpose of writting this selector?

input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}
<div id="container">
        <form class="form-contact">
        <h1>Contact</h1>

          <label for="name">Name:</label> 
          <input type="text" id="name">

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="email@website.com">

        <label for="msg">Message:</label>
        <textarea id="msg" rows="7"></textarea>

          <input type="submit" value="Submit">
          <input type="reset" value="Reset"> 
        </form>

        <hr>
        <img src="img/avatar.png" alt="Mountains">

        <form class="form-login">
            <label for="username">Username:</label> 
            <input type="text" id="username">

            <label for="password">Password:</label>
            <input type="password" id="password">

            <input type="submit" value="Login">
      <a href="#" target="_blank">Forgot your password?</a> 
        </form>
    </div>

5 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

It just means that the pointer will target a button type if one is created in the HTML. We're getting ourselves prepared in case we want to use a button instead of using one selector in our rule, we can group them because they do the same things. :-)

Jakub Tyczyński
Jakub Tyczyński
3,310 Points

So this means that in this case, input[type="button"] selector is not needed and is added only for future use. Do I understand it right?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'd say so but if I were you I'd leave it in for the time being until you know it's not going to be used. Maybe Guil has a use in mind for it somewhere in the future, I can't quite rememeber.

It's up to you how you approach it though but for me, you can take care of these sorts of things in "code cleanup". :-)

Brian Pohuski
Brian Pohuski
5,386 Points

For additional future-proofing, add a CSS selector for the HTML5 <button> element as well. The default action for a button is to submit when within a form if no other type attribute is specified. So, there is possibility that the <button> element will be using instead of

<input type="submit" value="foo">

With proper parent selectors in place, this will future-proof without changing other button styles. :D More reading if interested: https://davidwalsh.name/html5-buttons

Quinton Shuman
Quinton Shuman
7,068 Points

If this is the case then I would've appreciated Guil saying so during the video. I was thinking the complete opposite. I was thinking that putting in "reset" and "submit" must have some default "button" value that is just there to begin with and that "input[type="button"]" was already targeting them, rendering "input[type="reset"]" and "input[type="submit"]" useless redundancy. I suppose I could just be being pedantic but if I do something I want to understand what I'm doing not just know that I'm doing it.

erikanicosia
erikanicosia
7,788 Points

I was wondering the same thing, and then I looked again at the html code. Could it be that there is a type-o in the code that was provided? For the login button (line 38 of the html code), the type is "submit", which is also the type for the submit button (on line 24 of the code). Not that it really matters, because the styling works anyway :)

I have the same doubt. read everything, but still don't understand.

I have the same doubt. read everything, but still don't understand.