如何在代码中为不同位置的placeholder设置不同颜色

原因分析 #

• 你目前只写了标准的::placeholder伪元素规则，缺少不同浏览器的私有前缀，部分浏览器内核的组件会识别不到规则导致不生效
• 全局伪元素的优先级极低，如果你项目里有组件库自带的样式、或者其他写的更具体的placeholder规则，会直接覆盖全局样式
• Firefox等浏览器默认会给placeholder设置低于1的透明度，即使颜色设置正确也会看起来和预期不一致

解决方案 #

第一步：补全全局兼容的默认placeholder样式 #

替换你现有的全局样式，覆盖所有主流浏览器：

/* 浅色模式默认全局placeholder样式 */
::placeholder {
  color: #181818;
  opacity: 1; /* 兼容Firefox默认透明度问题 */
}
:-ms-input-placeholder { /* IE10-11 */
  color: #181818;
}
::-ms-input-placeholder { /* 旧版Edge */
  color: #181818;
}

第二步：给顶部输入框加专属样式适配深色模式 #

首先给顶部输入框的外层容器加一个唯一类名，比如top-note-input，然后在你的深色模式全局类（一般是加在html或者body上的类，比如dark-theme）下加覆盖规则：

/* 深色模式下顶部输入框placeholder设为白色 */
.dark-theme .top-note-input ::placeholder {
  color: #fff;
}
.dark-theme .top-note-input :-ms-input-placeholder {
  color: #fff;
}
.dark-theme .top-note-input ::-ms-input-placeholder {
  color: #fff;
}

如果样式还是被覆盖，可以在颜色属性后加!important提升优先级。

第三步：底部高亮区域无需额外处理 #

你不需要给底部高亮区域加任何额外的placeholder规则，全局默认样式会自动生效，保持原有样式不变。

异常排查 #

如果修改后还是不生效，打开浏览器开发者工具选中对应输入框，检查两个点：

• 对应输入框的placeholder是不是原生属性，部分自定义组件会把placeholder渲染成独立的span标签，这种情况直接修改对应span的颜色即可
• 查看样式面板的优先级，是不是有其他更具体的规则覆盖了你写的样式，调整优先级或者删掉冲突规则即可

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