html - CSS - 焦点登录字段就像只有 CSS 的 twitter 一样？

Question

我已经发布了 similar question并获得了一个有效的 jQuery 解决方案。现在我只想用 CSS/HTML 来做。我保存了twitter's homepage在本地删除了所有的 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" />