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

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

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

3 Answers

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

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

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

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.

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,367 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

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,367 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

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.