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 Foundations Selectors Link and User Action Pseudo-Classes

Posted by Veronika Benkeser
Veronika Benkeser
2,930 Points

Link and User Action Pseudo-Classes

Hi guys, For some reason, the email box does not light up yellow when I go through the elements with the tab button. It does work when I do input:focus{ background-color: yellow; } but according to the video, it should also work when we just do :focus{ background-color: yellow; }

Any help is appreciated! Thank you!

relevant code:

html: <a href="#" target="_blank">View more in a new tab »</a>

<form class="emailform"> <input type = "text" name = "email" placeholder="email"> 

<input type = "submit" name ="submit">

</form>

css: :focus{ background-color: yellow; }

2 Answers

chenfei
chenfei
2,707 Points
chenfei
chenfei
2,707 Points

Hi,

Actually even in the video, the 'submit' bottun didn't turn yellow. Mine also only turned yellow, when I put as: 

  input:focus {
    background-color: yellow;
  }

In fact, there's some error with the video. Before showing that web page, the code was 

  input:focus {
    background-color: yellow;
  }

After that, the code actually became

  a:focus {
    background-color: yellow;
  }

The tab only highlighted the links. It is not the same as input:focus, which highlights the input fields.

We probably should ask Guil Hernandez to help to answer this question.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Veronika,

You need to give each one a tab index like so.

<input tabindex="1" type = "submit" name ="submit">
<textarea tabindex="2">