如何添加不同的占位符颜色答案

【问题标题】：How to add different placeholder color如何添加不同的占位符颜色
【发布时间】：2022-01-09 00:10:05
【问题描述】：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 颜色：#909； }

此代码更改所有输入占位符的颜色。如何为不同的输入字段制作不同的占位符颜色

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案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">

【讨论】：

【解决方案2】：

另一种选择是使用::placeholder 来设置placeholder 的样式。

::placeholder CSS 伪元素表示 or 元素中的占位符文本。

请注意，Internet Explorer 不支持此功能，但由于您使用的是webkit，因此您使用的是 Chrome 或 Safari，这将适合您。

例子：

::placeholder{
color:red;
opacity:0.6

}

&lt;input placeholder='yes'/&gt;

【讨论】：