如何修改chrome账号密码自动填充的字体样式

项目场景：

• 登录页面刷新输入框自动填入的账号和密码，实际字体大小与输入框设置的字体大小不同，点击输入框后字体又变成了设置的字体大小。

---

问题描述：

• 在css样式中设置输入框字体大小为 font-size:20px ,在浏览器中也生效了，但是页面刷新字体的大小还是没有变化，仍为 14px 或 16px ，但是鼠标点击输入框字体又会变成设置的字体大小 20px ，一开始我以为是 placeholder 提示的设置了 font-size 属性，但是查看表单中的输入框设置的 placeholder 是一个固定的字符串 placeholder="用户名" ，不会出现用户的账号和密码信息，所以应该不是 placeholder 导致的问题，网上查了发现是 chrome 的自动填充的默认样式造成现在这种现象。

账号密码自动填充账号和密码的文字大小如下所示：

鼠标点击之后账号和密码的文字大小：

html部分：

 <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="用户名"
          name="username"
          type="text"
          tabindex="1"
          autocomplete="on"
        />
      </el-form-item>
      <el-tooltip
        v-model="capsTooltip"
        content="Caps lock is On"
        placement="right"
        manual
      >
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="密码"
            name="password"
            tabindex="2"
            autocomplete="on"
            @keyup.native="checkCapslock"
            @blur="capsTooltip = false"
            @keyup.enter.native="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>
      </el-tooltip>
      <div class="login-btn centre3" @click="showlogin ? handleLogin() : ''">
        <div
          v-if="showlogin"
          style="
            color: #ffff;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 500;
          "
        >
          登 录
        </div>
        <div
          v-else
          style="
            color: #ffff;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 500;
          "
        >
          登录中<i class="el-icon-loading" />
        </div>
      </div>
    </el-form>

CSS部分：

.el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;
      font-size: 20px;
    }
  }

---

原因分析：

• 给表单设置自动填充 autocomplete="on" 后，chrome会默认给自动填充的input表单加上 input:-webkit-autofill 私有属性。

---

解决方案：

1、设置 autocomplete 为 off，关闭自动填充功能。
2、通过 -webkit-autofill::first-line 设置填充文字样式，覆盖默认的样式。

  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;
      font-size: 20px;

      &:-webkit-autofill {
        transition: background-color 99999s ease-in-out 0s !important;
        -webkit-text-fill-color: $cursor !important;
      }
      // 自动填充文本样式
      &:-webkit-autofill::first-line {
        font-size: 20px;
      }
    }
  }