Question

可以分配文本：

inputElement.placehoder="my placeholder";

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

Answer 1

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

.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;
}

<input id="input" type="text" placeholder="hello world" />
<input id="input2" type="text" placeholder="this would not be affected" />

Answer 2

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

请参阅此问题的答案以进行操作：jQuery change placeholder text color

Answer 3

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

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

::placeholder {
  color: blue;
}

<input placeholder="I should be blue" />

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

3 个答案: