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

Question

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!

Answer 1 · 2018-06-07T01:06:39Z

June 7, 2018 1:06am

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. Or watch this video on code formatting.

Welcome to the Treehouse Community

Looking to learn something new?

Madeline Yao

Madeline Yao

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

1 Answer

Steven Parker

Steven Parker