如何在javascript中更改输入元素占位符颜色？ [复制]答案

【问题标题】：How to change input element placeholder's color in javascript? [duplicate]如何在javascript中更改输入元素占位符颜色？ [复制]
【发布时间】：2020-04-19 15:04:01
【问题描述】：

可以指定文字：

inputElement.placehoder="my placeholder";

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

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/::placeholder afaik，你必须上课。内联样式只影响它们所在的元素，如果它们的属性被继承，则影响子元素
这能回答你的问题吗？ How to update placeholder color using Javascript?
还有另一个 StackOverflow 线程使用 JQuery 修复它。 stackoverflow.com/questions/14967250/…请看一下。

标签： javascript css

【解决方案1】：

只需添加一个类，比如 custom-placeholder 附加到预定义的 ::placeholder 选择器到您的 css 中，然后使用 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" />

【讨论】：

【解决方案2】：

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

请参阅此问题的答案：jQuery change placeholder text color

【讨论】：

【解决方案3】：

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

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

::placeholder {
  color: blue;
}

&lt;input placeholder="I should be blue" /&gt;

【讨论】：