CSS - 焦点登录字段就像twitter只有CSS？ [英] CSS - Focus login fields just like twitter with only CSS?

问题描述

我已经发布了一个类似问题并获得了一个工作的jQuery解决方案。现在我想只使用CSS / HTML。我在本地保存了 Twitter的首页，并删除了所有js脚本，并注意到我试图实现的效果是使用CSS / HTML（当您点击用户名/通过值用户名/密码留在那里，直到您输入文本）。

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

在这些新的CSS / HTML效果的新手，并花了最后几个小时试图复制它没有成功。

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.

这里的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应该怎么样？或者你能指点我的教程，如何实现相同的效果，因为这是驱动我坚果？

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?

非常感谢， / em>
Cris

Thank you very much, Cris

推荐答案

设置HTML autofocus 属性：

Set the HTML autofocus attribute:

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

这篇关于CSS - 焦点登录字段就像twitter只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！