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

Красивый плейсхолдер для INPUT

важность: 5

Создайте для <input type="password"> красивый, стилизованный плейсхолдер, например (кликните на тексте):

При клике плейсхолдер просто исчезает и дальше не показывается.

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

Вёрстка

Для вёрстки можно использовать отрицательный margin у текста с подсказкой.

Решение в плане вёрстки есть в решении задачи Расположить текст внутри INPUT.

Решение

placeholder.onclick = function() {
  input.focus();
}

// onfocus сработает и при вызове input.focus() и при клике на input
input.onfocus = function() {
  if (placeholder.parentNode) {
    placeholder.parentNode.removeChild(placeholder);
  }
}

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