Chromium 95+如何修改input autofill的font-size与font-family

截止Chromium 101版本，不存在纯CSS原生方案可以直接修改input自动填充状态下文本的font-family、font-size属性。
Chromium 95版本正式移除了通过:-webkit-autofill::first-line控制字体样式的能力，目前对外开放的可控样式仅保留了文本颜色（通过-webkit-text-fill-color设置）、背景（通过内阴影hack实现）两类，字体、字号、字重这类字体相关属性被浏览器用户代理样式强制覆盖，无法通过伪类直接修改。

目前生产环境可用的方案都是通过轻量JS逻辑触发浏览器重绘，让自动填充文本应用input本身设置的字体样式，不需要改动现有页面结构，兼容性稳定。

• 基于自动填充动画监听的重绘方案
  浏览器触发自动填充时，会匹配:-webkit-autofill伪类，我们可以给这个状态绑定一个空动画，通过监听动画启动事件精准捕获自动填充动作，触发一次轻量重绘即可让预设的字体样式生效。
  完整实现代码如下：

  /* 给input本身设置你需要的所有字体样式 */
  .target-input {
    font-size: 2rem;
    font-weight: bold;
    font-family: "自定义字体", sans-serif;
    color: #333;
  }
  
  /* 兼容自动填充状态的颜色、背景样式，和原有写法一致 */
  .target-input:-webkit-autofill,
  .target-input:-webkit-autofill:hover,
  .target-input:-webkit-autofill:focus,
  .target-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset; /* 替换为你需要的输入框背景色 */
    -webkit-text-fill-color: #333; /* 替换为你需要的文本颜色 */
    transition: background-color 5000s ease-in-out 0s;
    /* 绑定空动画用于检测自动填充事件 */
    animation: autofill-detect 0.1ms;
  }
  
  @keyframes autofill-detect {
    from {}
    to {}
  }
  

  // 监听自动填充触发，执行重绘
  const input = document.querySelector('.target-input');
  input.addEventListener('animationstart', (e) => {
    if (e.animationName === 'autofill-detect') {
      // 临时重置值触发重绘，不会丢失自动填充的内容
      const val = input.value;
      input.value = '';
      input.value = val;
      // 可按需添加自动填充状态标记类
      input.classList.add('is-autofilled');
    }
  });
  

  这个方案在Chromium 95-115版本均验证有效，不会打断浏览器原生自动填充的交互流程，也不会导致输入内容丢失。
• 自定义自动填充逻辑
  如果不想引入JS监听，可以给输入框设置autocomplete="new-password"（部分场景下autocomplete="off"会被Chrome忽略）关闭浏览器原生自动填充，自行实现历史输入记录、下拉选择填充的逻辑，这种场景下填充的文本完全受自定义CSS控制，没有浏览器样式限制，但开发成本更高，适合对交互一致性要求极高的场景。

注意：目前没有任何CSS hack可以绕过Chromium 95+的样式限制，所有声称纯CSS修改自动填充字体的方案在新版本浏览器下均已失效，不必再浪费时间尝试伪元素、属性选择器类的写法。

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