Как сделать так, чтобы при вводе текста placeholder не исчезал?

Question

[Vitaly Max]

Есть placeholder, я его стилизовал таким образом

Проблема в том, что он исчезает при вводе (по умолчанию так).
Как изменить поведение, чтобы он не исчезал?

Answer 1

[Александр]

Использовать label?

Похожее поведение

Comments

[Vitaly Max]

Seasle да, вариант понятен, я делал, но там возникла путаница в CF7.. Вообще что с происходит с placeholder когда поле ввода focus..? У него цвет пропадает, или display: none?

[Александр]

В принципе сам placeholder пропадает, когда поле либо не пустое либо в нём фокус.

[Vitaly Max]

да, только что с ним происходит именно? может цвет делается прозрачным, или что-то другое?

[Александр]

Vitaly Max, Исправил ответ, добавил как можно сделать. А про placeholder уже ответил.

[Kovalsky]

Vitaly Max, плейсхолдер реализован средствами браузера, средства HTML и CSS к нему применимы только частично. А так как браузеров много, то по факту и сокрытие плейсхолдера может быть реализовано по-разному

[Станислав]

Всем добрый!
JS я бы немного сократил до такого:

const A = ({target: e}) => e.parentElement.classList[ e.value.length > 0 ? 'add' : 'remove' ]('form__group--active');
const F = document.querySelector('.form');
for (const EL of F) A({target: EL});
F.oninput = A;

[Александр]

Станислав, Почитайте.

[Станислав]

Александр, Я думал что-то новенькое. Так это я уже читал, как-то.
А поводу сокращений, дык, кто мешает заменить Вам или кому-то на более понятные константы?

[Александр]

Станислав, Ну и сможете сказать, что делает Ваш код через пару месяцев? С тем, конечно же, условием, что Вы работали.

[Станислав]

Александр, Работаю уже не один год, и Вы знаете, особых проблем что-то и не припомню.