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 trialMadeline Yao
Full Stack JavaScript Techdegree Student 9,611 PointsWhy 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
231,198 PointsIt 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.