CSS - 专注于登录字段就像只有CSS的Twitter？

Question

我已经发布了一个类似的问题,并得到了一个有效的jQuery解决方案.现在我想用CSS/HTML来做.我在本地保存了twitter的主页并删除了所有的js脚本,并注意到我想要实现的效果是使用CSS/HTML(当你点击用户名/传递值时,"用户名"/"密码"会一直保留到你输入文字).

我是这种新的CSS/HTML效果的新手,并且花了最后几个小时尝试复制它并没有成功.

这是twitter登录表单的html:

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

我查看了网站的CSS,但它是10,000行,非常复杂.CSS应该怎么样？或者你能指出我如何达到同样效果的教程,因为这让我疯了吗？

谢谢你, 克里斯

Answer 1

设置HTML autofocus属性:

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