Javascript：更改创建的输入的占位符颜色[重复]

Question

这个问题在这里已有答案：

• Change an HTML5 input's placeholder color with CSS 33回答

所以我使用document.createElement创建了一个输入，但我似乎无法改变我为它制作的占位符文本的颜色！我该怎么做呢？香港专业教育学院已经尝试过做element.placeholder.style.color element :: placeholder.style.color等等！

Answer 1

您可以在大多数现代浏览器中使用::placeholder伪类：

input::placeholder {
  font-weight: bold;
  font-style: italic;
  opacity: 0.5;
  color: #336699;
}

<input type=text placeholder="Hello World">

伪类目前不是规范的一部分（不是“已批准”规范的一部分）所以它经常出现在像-webkit-placeholder或-moz-placeholder这样的前缀后面。在Firefox 58和Chrome 64中，普通的::placeholder确实有效。

从用户脚本中，您可以创建包含规则的新<style>元素，并将其附加到文档正文。

Answer 2

您可以将属性添加到::placeholder伪元素。了解更多here

var x = (document.createElement('input'));
x.placeholder = "Test";
document.body.appendChild(x)

::-webkit-input-placeholder {
  color: green;
}