如何将<input>元素的::placeholder颜色恢复为浏览器默认值

你遇到的核心问题是：color: initial和color: unset并没有指向浏览器给placeholder的默认灰色——initial是CSS属性的初始文字颜色（默认黑色），unset会继承父元素的文字颜色（同样为黑色），所以无法达到恢复默认样式的效果。

以下是几种可行的解决方案：

1. 直接使用浏览器默认的placeholder颜色值 #

不同浏览器的默认placeholder颜色略有差异，直接写入对应值即可：

.inp1::placeholder {
  color: red;
}
/* Chrome/Edge/Safari 默认色 */
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: rgba(0, 0, 0, 0.54);
}

如果要兼容更多浏览器，可以加上前缀：

.inp1::placeholder {
  color: red;
}
/* Chrome/Opera/Safari */
.inp1:hover::-webkit-input-placeholder,
.inp1:focus::-webkit-input-placeholder {
  color: rgba(0,0,0,0.54);
}
/* Firefox 19+ */
.inp1:hover::-moz-placeholder,
.inp1:focus::-moz-placeholder {
  color: rgba(0,0,0,0.6);
}
/* IE 10+ */
.inp1:hover:-ms-input-placeholder,
.inp1:focus:-ms-input-placeholder {
  color: #666;
}

2. 通过类切换移除自定义样式 #

如果不想硬编码颜色值，可以通过添加/移除类的方式，让hover/focus时完全去掉自定义的placeholder颜色，回归浏览器默认：

CSS #

.inp1-custom::placeholder {
  color: red;
}

HTML #

<input class="inp1 inp1-custom" type="text" placeholder="Search">
<input class="inp2" type="text" placeholder="Search">

JS（实现类切换逻辑） #

const input = document.querySelector('.inp1');
// 聚焦和鼠标移入时移除自定义类
input.addEventListener('focus', () => input.classList.remove('inp1-custom'));
input.addEventListener('mouseenter', () => input.classList.remove('inp1-custom'));
// 失焦和鼠标移出时恢复自定义类
input.addEventListener('blur', () => input.classList.add('inp1-custom'));
input.addEventListener('mouseleave', () => input.classList.add('inp1-custom'));

3. 使用CSS变量统一管理默认色 #

定义一个CSS变量存储默认placeholder颜色，后续需要恢复时直接调用变量，方便统一维护：

:root {
  --placeholder-default: rgba(0, 0, 0, 0.54);
}

.inp1::placeholder {
  color: red;
}
.inp1:hover::placeholder,
.inp1:focus::placeholder {
  color: var(--placeholder-default);
}

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