textarea进入编辑状态时字体颜色异常改变问题咨询

问题复现代码 #

CSS样式 #

:root {
    --color-back: #000;
    --color-text: #fff;
}

textarea {
    background-color: var(--color-back);
    color: var(--color-text);
}

HTML结构 #

<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required=""></textarea>

问题判定 #

这个问题既不是平台依赖的不可控特性，也不需要借助JavaScript修复，属于CSS样式覆盖不全导致的兼容问题：

• 仅为textarea的普通状态设置了颜色样式，没有显式声明聚焦、激活状态下的样式规则
• 多数浏览器的用户代理样式会给聚焦状态的表单控件设置更高优先级的默认配色，部分适配暗黑模式、移动端的浏览器还会在输入状态注入系统级输入控件样式，直接覆盖基础标签选择器设置的字体颜色，就会出现未聚焦时样式正常、进入编辑状态后颜色异常的现象。

修复方法 #

直接补全textarea多状态的样式规则，同时加上webkit内核下的文本颜色强制声明，避免被浏览器默认样式覆盖，修复后的CSS代码如下：

:root {
    --color-back: #000;
    --color-text: #fff;
}

textarea,
textarea:hover,
textarea:focus,
textarea:active {
    background-color: var(--color-back);
    color: var(--color-text);
    /* 配置光标颜色和文本保持一致 */
    caret-color: var(--color-text);
    /* 强制webkit内核浏览器使用自定义文本色，避免被默认样式覆盖 */
    -webkit-text-fill-color: var(--color-text);
    /* 不需要默认聚焦轮廓可以加这行，按需保留即可 */
    outline: none;
}

如果后续开启了textarea的自动填充功能，还需要额外补充:-webkit-autofill伪类的样式规则，避免自动填充内容时颜色被浏览器重置，当前描述的编辑态变色问题用上述代码即可解决。

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