Создайте <input type="password"> с цветной подсказкой внутри:
В дальнейшем мы сможем при помощи JavaScript сделать, чтобы текст при клике пропадал. Получится красивая подсказка.
Исходный документ: tutorial/browser/css/input-password-margin-src.html.
P.S. Вокруг INPUT с подсказкой не должно быть лишних отступов, блоки до и после продолжают идти в обычном потоке.
P.P.S. Просто присвоить подсказку в input.value нельзя, потому что type="password". Кроме того, подсказка может быть как угодно стилизована.
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>
Полный код решения: tutorial/browser/css/input-password-margin.html.