Расположить текст внутри INPUT
Создайте <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>