如何实现悬停input元素时修改其placeholder的颜色？

核心逻辑：placeholder属于浏览器渲染的伪元素，无法直接为其绑定交互状态，所有状态样式变更都需要依托input实体本身的交互状态触发，不能直接为伪元素单独写hover规则。

通用原生CSS实现（无额外脚本依赖） #

这是兼容性最好的实现方式，需要覆盖不同浏览器对placeholder伪元素的专属选择器：

• 默认状态下配置placeholder基础颜色
• 在input的:hover选择器下，嵌套配置同套伪元素的目标颜色规则
  代码示例：

/* 基础状态 placeholder 跨浏览器兼容配置 */
input::placeholder {
  color: #999;
}
input::-webkit-input-placeholder { /* Chrome、Safari、新版Edge */
  color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #999;
  opacity: 1; /* 重置火狐默认给placeholder加的半透效果 */
}
input:-ms-input-placeholder { /* IE10/11 */
  color: #999;
}

/* 悬停input时的placeholder变色规则 */
input:hover::placeholder {
  color: #222; /* 替换为需要的目标颜色 */
}
input:hover::-webkit-input-placeholder {
  color: #222;
}
input:hover::-moz-placeholder {
  color: #222;
}
input:hover:-ms-input-placeholder {
  color: #222;
}

自定义输入组件的适配方案 #

如果input是被自定义容器包裹的组件（比如外层套div的搜索框、带图标的输入框），只要把hover状态绑定在最外层的容器选择器上，向下穿透选到内部的placeholder即可：

/* 外层容器hover时，触发内部input的placeholder变色 */
.input-container:hover input::placeholder {
  color: #222;
}
/* 其余浏览器兼容规则同上，套在容器hover选择器下即可 */

简化写法（CSS变量方案） #

如果不想重复写多套浏览器兼容规则，可以把placeholder颜色存在CSS变量中，只需要在input状态切换时修改变量值：

input {
  /* 定义变量存placeholder颜色 */
  --ph-color: #999;
}
input:hover {
  /* 悬停时修改变量值 */
  --ph-color: #222;
}

/* 所有伪元素规则统一引用变量，避免重复写颜色值 */
input::placeholder { color: var(--ph-color); }
input::-webkit-input-placeholder { color: var(--ph-color); }
input::-moz-placeholder { color: var(--ph-color); opacity: 1; }
input:-ms-input-placeholder { color: var(--ph-color); }

常见踩坑提示 #

• 禁止直接写input::placeholder:hover选择器，该规则永远无法生效——因为hover状态是绑定在实体input元素上的，不是绑定在伪元素上的
• 火狐浏览器默认会给placeholder加50%透明度，如果要精准匹配颜色，必须在火狐的伪元素规则里手动把opacity设为1

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