如何覆盖Microsoft Edge中输入框自动补全时的文本颜色？

问题背景 #

CSS中设置了全局通配符样式：

* {
  color: white
}

后续为输入框单独设置了字体颜色为黑色，但在Microsoft Edge中，输入框自动填充时，匹配的字符会恢复为通配符设置的白色，导致在白色背景上无法显示（如箭头指向的白色字符，仅后续"an"可见）。常规自动填充相关CSS样式无效，该问题仅出现在Edge，Chrome无此现象，且为近期新增问题。需找到Edge特定选择器解决，避免大规模修改全局样式。

解决方案 #

1. 针对自动填充匹配字符的伪元素选择器 #

Edge支持::highlight(autofill-match)伪元素，专门用于设置自动填充时匹配文本的样式，直接指定颜色即可覆盖全局样式：

/* 覆盖Edge自动填充匹配字符的颜色 */
input::highlight(autofill-match) {
  color: black !important;
  background-color: transparent; /* 可选：清除默认高亮背景 */
}

注意：需确保选择器优先级足够，必要时添加!important或结合输入框类名/ID提升权重。

2. 强化输入框自动填充样式优先级 #

通过Edge专属的自动填充伪类，配合高优先级设置覆盖全局样式：

/* 覆盖Edge及其他浏览器的自动填充文本颜色 */
input[type="text"],
input[type="email"],
input[type="password"],
/* 按需添加其他输入类型 */
input:-ms-autofill,
input:-ms-autofill:hover,
input:-ms-autofill:focus {
  color: black !important;
  background-color: white !important; /* 可选：固定输入框背景色，避免干扰 */
}

3. 限制全局通配符的作用范围 #

如果上述方法无效，可修改全局通配符，排除输入类元素，从根源避免样式冲突：

/* 全局样式排除输入框、文本域、下拉框 */
*:not(input):not(textarea):not(select) {
  color: white;
}

此方法改动量远小于直接修改全局颜色，需验证页面其他元素样式不受影响。

内容的提问来源于stack exchange，提问作者Paul-Jan