How do I change the placeholder-a color via javascript?

Question

How do I change the placeholder-a color via javascript?

Hello everyone I have an input, how can I change the color of placeholder-a when the focus is on input? Do something like when you log in to VKontakte. That is, if there is a hover on the input, the placeholder becomes more transparent, or the color can be made more bright.

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

I learned that you can write in styles like this:

.login::placeholder {
    opacity: 0.2;
}

But here I have a problem: I always solved problems through classList. add, prescribing a class with styles in the style.css file, where they were stored all my styles. Dobvavlyalos everything is simple, like add ('active'), etc. But now there is a problem, I do not know how to work in javascript-e with pseudo-classes. Is there a solution? Who faced it?

0

javascript css3 html5 dom

Author: Мирас Текесбаев, 2020-03-16

Source

1 answers

score 6 · Accepted Answer

.login::placeholder {
  opacity: 0.2;
}

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

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

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

You can also get from JS using CSS variables:

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)">