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

Shazad Kazi
Shazad Kazi
10,758 Points
Posted by Shazad Kazi
Shazad Kazi
10,758 Points

Inputbox not turning aqua, upon focus?

/* UI element states pseudo-classes ------------ */

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

Following the video, I was trying to get the inputbox's border to turn aqua upon focus. That was the code I used.

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

I re opened workspace, typed the exact same code and it worked. Must have been an error there.

3 Answers

Jaro Schwab
Jaro Schwab
8,957 Points
Jaro Schwab
Jaro Schwab
8,957 Points

Hey. This should do the trick: 

/* UI element states pseudo-classes ------------ */

input:focus, 
textarea:focus {
 border-color: #52bab3; 
 outline: none !important;
}
Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

What does, " outline: none !important" do?

Jaro Schwab
Jaro Schwab
8,957 Points

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". With "outline: none", you just disable this line. Instead of outline:none, you could specify the color of the outline to your aqua color, like this:

input:focus, 
textarea:focus {
 border-color: #52bab3; 
 outline-color: #52bab3;
}
Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Hey Jaro,

I've tried changing up the values with the outline and the outline doesn't seem to be doing anything. Infact it works without the outline or if I had the outline on its own it wouldn't work as well.

Thanks though I appreciate the help regardless.

Jaro Schwab
Jaro Schwab
8,957 Points

Yeah, i see. That is because you defined your outline in the base.css as zero, which i didn't see from the begining. As long as you have outline:0 , you won't see any changes on the outline.

Cheers :)

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hey Shazad! I just did it over the workspace offered in the video and it's working fine for me, bottom border gets aqua on focus...I tried changing it to red to further test it and it worked too! Did you save the changes in the file? Did you refresh the browser?

Look, here is a snapshot from the workspace: https://w.trhou.se/fydjj24p1e

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Hi Julian, thank you for the swift response. I believe there must've been an error in workspaces as I relaunched the workspace and it seemed to work perfectly. Just out of curiosity, do you know why only a bottom border is applied?

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Yes! Its because in the base.css file you have the following code:

input,
textarea  {
  outline: 0;
    border: none;
    padding: 15px;
    border-radius: .3em;
    border-bottom: 3px solid rgba(0,0,0,0.05);
}

Where the input and textarea got a border-bottom only, thats why when you set the border color to some color, you only see the bottom border when focused.

Shazad Kazi
Shazad Kazi
10,758 Points
Shazad Kazi
Shazad Kazi
10,758 Points

Ahh, I actually forgot about the base file. Just added

border-top: 3px solid rgba(0,0,0,0.05)

in the new style sheet above border-color. To test it out and now I've a top and bottom border.