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
Author: Мирас Текесбаев, 2020-03-16
1 answers
.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)">
6
Author: UModeL, 2020-03-16 07:00:28