вернуться к уроку

Расположить текст внутри INPUT

важность: 5

Создайте <input type="password"> с цветной подсказкой внутри (должен правильно выглядеть, не обязан работать):

В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.

P.S. Обратите внимание: type="password"! То есть, просто value использовать нельзя, будут звёздочки. Кроме того, подсказка, которую вы реализуете, может быть как угодно стилизована.

P.P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.

Открыть песочницу для задачи.

Подсказка

Надвиньте элемент с текстом на INPUT при помощи отрицательного margin.

Решение

Надвинем текст на INPUT при помощи отрицательного margin-top. Поднять следует на одну строку, т.е. на 1.25em, можно для красоты чуть больше – 1.3em:

Также нам понадобится обнулить «родной» margin у INPUT, чтобы не сбивал вычисления.

<style>
  input {
    margin: 0;
    width: 12em;
  }

  #placeholder {
    color: red;
    margin: -1.3em 0 0 0.2em;
  }
</style>

<input type="password" id="input">
<div id="placeholder">Скажи пароль, друг</div>

Открыть решение в песочнице.