如何在javascript中更改输入元素占位符的颜色？

Question

可以分配文本：

inputElement.placehoder="my placeholder";

但是如何调整占位符的颜色或不透明度（不创建css选择器）？

Answer 1

您不能； CSS中只有伪元素::placeholder可以影响颜色

充其量，您可以将此样式应用于类/ id，然后使用JavaScript将该类添加到您的元素中

::placeholder

::placeholder {
  color: blue;
}

Answer 2

您将需要为所需的外观定义类，然后通过JS应用这些类。

请参阅此问题的答案以进行操作：<input placeholder="I should be blue" />

Answer 3

[还有另一个StackOverflow线程使用JQuery对其进行了修复。jQuery change placeholder text color

请看一下。

Answer 4

只需在CSS上添加一个类，例如，将jQuery change placeholder text color附加到预定义的custom-placeholder选择器，然后使用JavaScript将其添加到元素中，如下所示：

::placeholder

检查并运行以下代码片段以获取上述示例：

.custom-placeholder::-webkit-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder:-ms-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder::placeholder {
  color: red;
  opacity: 0.4;
}

document.getElementById("input").classList.add("custom-placeholder");

.custom-placeholder::-webkit-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder:-ms-input-placeholder {
  color: red;
  opacity: 0.4;
}
.custom-placeholder::placeholder {
  color: red;
  opacity: 0.4;
}