如何修改浏览器自动补全下拉菜单选中后输入框的样式？

浏览器自动补全后的输入框高亮是浏览器原生的表单填充样式，和::selection伪类控制的选中文本样式完全是两回事，所以用::selection不会生效。要修改这个样式，需要针对浏览器提供的专属伪类来写CSS：

针对WebKit内核浏览器（Chrome、Edge、Safari等）的解决方案 #

直接给目标输入框添加::-webkit-autofill系列伪类，强制覆盖浏览器默认样式：

/* 匹配name属性为"name"的输入框，自动补全后的状态 */
input[name="name"]:-webkit-autofill,
input[name="name"]:-webkit-autofill:hover,
input[name="name"]:-webkit-autofill:focus {
  /* 自定义背景色 */
  background-color: #f0f4f8 !important;
  /* 自定义文字颜色 */
  -webkit-text-fill-color: #2d3748 !important;
  /* 用inset阴影覆盖浏览器默认的黄色背景（关键技巧） */
  box-shadow: 0 0 0px 1000px #f0f4f8 inset !important;
  /* 可选：保留输入框原有的边框样式 */
  border-color: #cbd5e0 !important;
}

注意事项 #

1. 必须加!important：浏览器对自动补全样式的优先级极高，不加无法覆盖默认样式。
2. 火狐浏览器的兼容：火狐使用:-moz-autofill伪类，写法类似，但部分版本可能需要额外处理：

input[name="name"]:-moz-autofill {
  background-color: #f0f4f8 !important;
  color: #2d3748 !important;
}

3. 若不需要自动补全功能：可以直接在input标签添加autocomplete="off"属性彻底禁用，但这会影响用户体验，优先推荐修改样式而非禁用。

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