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 trialShazad Kazi
10,758 PointsInputbox 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.
3 Answers
Jaro Schwab
8,957 PointsHey. This should do the trick:
/* UI element states pseudo-classes ------------ */
input:focus,
textarea:focus {
border-color: #52bab3;
outline: none !important;
}
Shazad Kazi
10,758 PointsWhat does, " outline: none !important" do?
Jaro Schwab
8,957 PointsAn 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
10,758 PointsHey 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
8,957 PointsYeah, 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
11,368 PointsHey 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
10,758 PointsHi 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
11,368 PointsYes! 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
10,758 PointsThanks :)
Shazad Kazi
10,758 PointsAhh, 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.
Shazad Kazi
10,758 PointsShazad Kazi
10,758 PointsI re opened workspace, typed the exact same code and it worked. Must have been an error there.