主页 / 问题 / 1095188
Accepted
Мирас Текесбаев
Asked:2020-03-16 14:29:12 +0000 UTC2020-03-16 14:29:12 +0000 UTC

如何使用javascript更改占位符颜色？

  • 772

大家好！我有一个输入，如何在焦点输入时更改占位符的颜色？在进入 VKontakte 时做类似的事情。也就是说，如果输入上有悬停，占位符会变得更透明，或者颜色可以变得更亮。

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

我了解到你可以这样写：

.login::placeholder {
    opacity: 0.2;
}

但是在这里我遇到了问题：我总是通过classList.add解决问题，在style.css文件中预先编写了一个带有样式的类，我所有的样式都存储在其中。一切都被简单地添加了，比如 add('active') 等等。但是现在有一个问题，我不知道如何在 javascript 中使用伪类。有什么解决办法吗？谁面对？

javascript

1 个回答

  1. Best 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">

    您还可以使用 CSS 变量从 JS 中获取：

    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

相关问题