javascript - 如何添加不同的占位符颜色

Question

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; }

This code change color of all input placeholder. How to make different placeholder colors for different input fields

Answer 1

您需要更具体地说明:
如果您将 ::-webkit-input-placeholder 放入 CSS 中，您将选择所有占位符...但这不是我们想要的

因此使用 :nth-of-type(); 伪类，您可以轻松选择所需的。

有用的文档:

• nth-of-type MDN documentation

所以代码将是这样的:

/* 1 */

input:nth-of-type(1)::-webkit-input-placeholder {
  color: green;
}


/* 2 */

input:nth-of-type(2)::-webkit-input-placeholder {
  color: blue;
}


/* 3 */

input:nth-of-type(3)::-webkit-input-placeholder {
  color: red;
}

<!-- 1 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 2 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 3 -->
<input type="text" name="" id="" placeholder="hello world">