CSS - Focus login fields just like twitter with only CSS?

Question

I already posted a similar question and got a jQuery solution that works. Now I want to do it with only CSS/HTML. I saved twitter's homepage locally and deleted all the js scripts and noticed that the effect I'm trying to achieve is with CSS/HTML (when you click on the username/pass the values "Username"/"Password" stay there until you enter text).

I'm a newbie at these kind of new CSS/HTML effects and have spent the last couple of hours trying to replicate it with no success.

Here's the html of twitter's login form:

<form action="#" class="signin" method="post">
      <fieldset class="textbox">
        <div class="holding username">
          <input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
          <span class="holder">Username</span>
        </div>
        <div class="holding password">
          <input type="password" id="password" value="" name="session[password]" title="Password">
          <span class="holder">Password</span>
        </div>
      </fieldset>
      <fieldset class="subchck">
  <label class="remember">
    <input type="checkbox" value="1" name="remember_me">
    <span>Remember me</span>
  </label>
  <button type="submit" class="submit button">Sign in</button>
</fieldset>

I've looked over the site's CSS but it's 10,000 lines and very complicated. How should the CSS look like? Or could you point me out to a tutorial on how to achieve the same effect as this is driving me nuts?

Thank you very much, Cris

Answer 1

Set the HTML autofocus attribute:

<input type="text" placeholder="Type here ..." autofocus="autofocus" />

Answer 2

You can target elements that are focused or blured like so:

input:focus {color:red;}

You now need to nest the CSS to hide the span called holder inside the input.

span.holder input:focus {visibility:hidden;} 

I have not tried this, but it would be something like this.