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 Going Further with Attribute Selectors and Pseudo-Classes Element States Pseudo-Classes

Madeline Yao
seal-mask
.a{fill-rule:evenodd;}techdegree
Madeline Yao
Full Stack JavaScript Techdegree Student 9,611 Points

Why the Border Color does not Change Once It Receives Focus?

Hello everyone, here is my code from the pseudo class tutorial: a. style.css: /* UI element states pseudo-classes ------------ */ textarea: focus, input: focus{ border-color: #52bab3; }

input:disabled{ background-color:#ddd; }

input[type="checkbox"]:checked + label{ font-weight:500; } b. index.html: <!DOCTYPE html> <html> <head> <title>Selectors</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <form class="form-contact br"> <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" disabled>

        <label>Interests:</label>
        <input type="checkbox" id="development" name="user_interest"><label for="development">Development</label><br>
        <input type="checkbox" id="design" name="user_interest"><label for="design">Design</label><br>
        <input type="checkbox" id="business" name="user_interest"><label for="business">Business</label><br>

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

      <input class="btn default" type="submit" value="Submit">
    </form>
</div>

</body> </html>

I do not understand why my code for the focus of textarea and input cannot make the border color of username blank green when the blank receives focus. Could anyone please explain about it? Thank you!

1 Answer

Steven Parker
Steven Parker
231,269 Points

It looks like you have some stray spaces in your selectors, so your CSS is being ignored. Also, I don't think a textarea has a border by default, but it has an outline. So try this:

textarea:focus, input:focus {
  border-color: #52bab3;
  outline-color: #52bab3;
}

Also, when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.