CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Element States Pseudo-Classes

Madeline Yao
Madeline Yao
Full Stack JavaScript Techdegree Student 9,610 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>

        <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">

</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
182,024 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.