如何使用CSS为指定输入框单独设置placeholder文字颜色

核心问题是选择器逻辑和实际DOM结构不匹配：

• 你要修改的输入框本身id就是login，但你写的#login input#text表示「选中id为login的元素内部、id为text的input子元素」，实际DOM里#login就是input本身，内部没有其他input，所以根本选不到目标元素，样式自然不会生效。
• 额外注意：不同浏览器的placeholder伪类不能合并写在同一条选择器里，否则只要一个浏览器不识别，整组规则就会全部失效。

直接选中#login元素，分别适配各浏览器的placeholder伪类即可，代码如下：

/* Webkit内核浏览器（Chrome、Safari、新版Edge） */
#login::-webkit-input-placeholder {
  color: #ff5b57;
}
/* Firefox 19+ */
#login::-moz-placeholder {
  color: #ff5b57;
  opacity: 1; /* 修复Firefox默认给placeholder加透明度导致色值偏浅的问题 */
}
/* Firefox 18及更早版本 */
#login:-moz-placeholder {
  color: #ff5b57;
  opacity: 1;
}
/* IE 10/11 */
#login:-ms-input-placeholder {
  color: #ff5b57;
}
/* 现代浏览器标准写法 */
#login::placeholder {
  color: #ff5b57;
  opacity: 1;
}

以上样式只会作用在id为login的第一个文本输入框，不会影响同表单的密码输入框，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者alexistkd