Как менять цвет placeholder-a через javascript?

Question

Всем привет! У меня есть инпут, как я могу поменять цвет placeholder-a при на фокусе на input? Сделать примерно как при входе ВКонтакте. То есть, если есть наведение на инпут, placeholder становится более прозрачным, ну или цвет более можно сделать ярким.

<input type="text" class="login" placeholder="Телефон или email">

Узнал что можно вот так прописать в стилях:

.login::placeholder {
    opacity: 0.2;
}

Но тут у меня проблемы: Я всегда решал задачки через classList.add, заранее прописывая класс со стилями в файле style.css, где хранились все мои стили. Добвавлялось все просто, типо add('active') и т.д. Но сейчас возникла проблема, не знаю как работать в javascript-e c псевдо-классами. Есть ли какое-то решение? Кто сталкивался?

Answer 1

.login::placeholder {
  opacity: 0.2;
}

.login:focus::placeholder {
  opacity: 1;
  color: red;
}

.login:hover::placeholder {
  opacity: 1;
}

<input type="text" class="login" placeholder="Телефон или email">

Из JS с помощью CSS-переменных тоже можно добраться:

function fColorPlaceholder(val) {
  document.querySelector('.login').style.setProperty(`--placeholder`, `hsl(${120 + val * 3},100%,50%)`);
}

body { text-align: center; }

.login { --placeholder: 50;}
.login::placeholder { color: var(--placeholder, grey); }

<input type="text" class="login" placeholder="Телефон или email">
<br>
<input type="range" oninput="fColorPlaceholder(this.value)">

БЛОГ НА HUSL

Как менять цвет placeholder-a через javascript?

Ответы (1 шт):