聚焦input元素时p标签文本变暗的原因及解决方法求助

问题重现代码 #

body {
  background-color: rgb(57, 57, 57);
}

p {
  color: rgb(243, 0, 0);
}

<input>
<p>I'm just a text that get's weird when i focus the input tag</p>

原因分析 #

这是浏览器的自动对比度优化机制导致的。当input元素获得焦点时，部分浏览器（如Chrome）会检测页面文本与背景的对比度是否符合可读性标准，当文本颜色和背景的对比度处于临界阈值附近时，浏览器会自动微调文本颜色（比如降低亮度、调整透明度）来提升可读性。你的红色文本在深灰色背景下刚好触发了这个阈值，其他颜色不在该范围内，所以未出现异常。

解决方法 #

通过CSS属性forced-color-adjust: none禁用浏览器的自动颜色调整，可按需选择作用范围：

方案1：仅针对目标p标签

p {
  color: rgb(243, 0, 0);
  forced-color-adjust: none;
}

方案2：全局禁用（影响页面所有元素）

body {
  background-color: rgb(57, 57, 57);
  forced-color-adjust: none;
}

该属性会强制浏览器遵循你设置的颜色值，不再自动调整对比度，即可阻止input聚焦时p标签文本变色。

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