CSS - Фокус поля входа, как твиттер только с CSS?

Question

Я уже опубликовал аналогичный вопрос и получил решение jQuery, которое работает. Теперь я хочу сделать это только с CSS / HTML. Я локально сохранил домашнюю страницу твиттера и удалил все js-скрипты и заметил, что я пытаюсь добиться эффекта с помощью CSS / HTML (, когда вы нажимаете на имя пользователя / передаете значения «Имя пользователя» / «Пароль» остается там до тех пор, пока вы не введете текст ).

Я новичок в этих новых CSS / HTML-эффектах и ​​провел последние пару часов, пытаясь воспроизвести его безуспешно.

Вот 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 сайта, но он 10000 строк и очень сложный. Как должен выглядеть CSS? Или вы могли бы указать мне на учебник о том, как добиться того же эффекта, что это сводит меня с ума?

Большое спасибо, Cris

Answer 1

Установить атрибут HTML autofocus:

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

Answer 2

Вы можете нацеливать элементы, которые сфокусированы или размыты следующим образом:

input:focus {color:red;}

Теперь вам нужно вложить CSS, чтобы скрыть диапазон, называемый holder , внутри ввода.

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

Я не пробовал это, но было бы что-то вроде этого.

Answer 3

Чтобы уточнить, я только что вытащил использование JavaScript в твиттере и источник для их домашней страницы, и я могу подтвердить, что они используют следующую функцию JavaScript для фокусировки на поле

 inp.focus()

JavaScript довольно длинный, но после быстрого прочтения похоже, что они используют jQuery, который устанавливает фокус на основе имени пользователя.

Я только что посмотрел на свойство автофокуса, предложенное другим постером, и этот метод работал для меня в моем веб-приложении, которое в настоящее время находится в стадии разработки.

Код для этого

<input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on" autofocus>

Обратите внимание, что согласно документации на веб-сайте W3C свойство автофокусировки может быть использовано на странице только один раз. Я поместил его в форму, которая скрыта и показана во встроенном элементе с помощью Fancybox.

Выделенный серым цветом текст в поле ввода можно сделать с помощью элемента-заполнителя, который я уже использую, добавив следующее в элемент ввода

placeholder="Username" 

ПРИМЕЧАНИЕ. И заполнитель, и автофокус являются свойствами HTML5 и могут поддерживаться не всеми основными браузерами, поэтому JavaScript все еще используется такими сайтами, как twitter.

Стилизация выполнена на основе CSS / CSS3, отличный ресурс - W3Schools . Я бы порекомендовал, чего вы хотите добиться, начиная с раздела CSS3, в котором рассматриваются границы. Еще один замечательный ресурс, который, к сожалению, не обновлялся около полутора месяцев, это doctype.tv. У Ника есть несколько фантастических советов относительно стиля вашего сайта, а также отличное понимание дизайна.

Answer 4

Судя по жирному тексту в вашем вопросе (, когда вы нажимаете на имя пользователя / пропускаете значения "Имя пользователя" / "Пароль", оставайтесь там, пока не введете текст ), я угадываю, что вы хотите это атрибут placeholder, который @phihag имеет в своем примере.

<input type="text" placeholder="This text will disappear" />

Атрибут placeholder работает без Javascript в браузерах, которые его поддерживают. Для старых браузеров вам понадобится немного Javascript, и, вероятно, именно это Twitter и делает в своем коде.

См. Страницу Wufoo в атрибуте Placeholder для получения более подробной информации, в том числе о том, как сделать откат javascript и какие браузеры в настоящее время поддерживаются.

См. Также это демо , в котором показано, как стилизовать состояния ": placeholder" и ": active" (по крайней мере, для webkit и mozilla).