css零散笔记——修改input样式input:-internal-autofill-selected背景色

闲聊：

小颖项目中的登录页需将  input  背景色设为透明，小颖将 input  的背景色设置后，发现表单自动填充后还是会有背景色，然后发现 浏览器 自带了背景色：

效果图：

                 

 

 

 虽然小颖也设置了其背景色为透明，但表单自动填充后还是有背景色，问度娘后解决了。

解决方案：

  .el-input {
    height: 46px;
    background: url(("../assets/largeS/login_input.png"));
    background-size: 100% 100%;
    .el-input-group__prepend,
    .el-input__inner,
    .el-input__inner:hover,
    .el-input__inner:focus {
      background-color: transparent !important;
      border-width: 0;
    }
    // 解决回填后带背景色问题
    .el-input__inner:-webkit-autofill,
    .el-input__inner:-webkit-autofill:hover,
    .el-input__inner:-webkit-autofill:focus,
    .el-input__inner:-webkit-autofill:active {
      -webkit-transition-delay: 99999s;
      -webkit-transition: color 99999s ease-out,
        background-color 99999s ease-out;
    }
    input {
      height: 46px;
      box-shadow: inset 0 0 0 1000px transparent !important;
    }
    .user_icon {
      width: 24px;
      height: 22px;
      display: inline-block;
      margin-top: 8px;
      background: url(("../assets/largeS/login_user.png"));
    }
    .password_icon {
      width: 19px;
      height: 23px;
      display: inline-block;
      margin-top: 8px;
      background: url(("../assets/largeS/login_pwd.png"));
    }
  }

参考：

chrome浏览器中自带input样式input:-internal-autofill-selected（修改input背景色）

表单信息：

    <div class="form_box">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <h3 class="title">欢迎登录</h3>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="账号"
          >
            <span slot="prepend" class="user_icon"></span>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
          >
            <span slot="prepend" class="password_icon"></span>
          </el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            class="login_btn"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading" style="font-size: 16px">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right" v-if="register">
            <router-link class="link-type" :to="'/register'"
              >立即注册</router-link
            >
          </div>
        </el-form-item>
      </el-form>
    </div>