前言

这个问题是老生常谈了, 但是之前一直没有找到一种很好的处理方式, 这次主要就是说明一下我见过的几种处理方式.

问题

我需要在如图的input中完成自动填充, 但是又不希望出现Chrome的黄色背景

处理方式

搜索之后, 出现频率最高的一条:

方法一:

使用box-shadow属性对黄色背景进行覆盖
```
input {
   box-shadow: 0 0 0px 1000px white inset
}
```
处理之后的问题是什么呢?

实际上黄色没有消除, 只是用其他颜色覆盖.

例如上面的代码中是用白色进行覆盖, 做不到半透明的效果.
方法二

使用双重input进行覆盖

这种方式我也进行过尝试
```
<form autocomplete="off">
  <input
    :type="newType"
    :placeholder="placeholder"
    :name="name+'-show'"
    class="input-autocomplete-show"
    autocomplete="off"
    @focus="getFocus"
  ></form>
<input
  :type="newType"
  :placeholder="placeholder"
  :name="name"
  ref="valueInput"
  class="input-autocomplete-value"
>
```
其本质, 是用一个不自动填充的input专门用于显示, 再用一个自动填充的input隐藏在其之后, 从而做到显示时没有黄色背景

这个方法我遇到一些小问题, 在用户点击显示input时, 如果做到触发隐藏input的自动填充界面调起?

鄙人尝试过.focus() .click()均无效

因此想要尝试使用模拟用户输入一个字符再删掉从而调起自动填充页.(未尝试)

方法三

黄色背景本质上是这么一串CSS导致的

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

那么解决方法就是将背景去除

使用background-clip属性进行处理

将背景的填充框选择为content-box(关于更多background-clip填充值, 盒子模型, 详见MDN)

再将height修为0, 即可把content-box高度设置为0, 从而黄色背景消失了

注: 这里不能同时将width修为0, 会导致内容消失

<!-- 附上第一幅图片效果的代码 -->
    <input
      type="username"
      placeholder="用户名"
      id="username"
      name="username"
      class="login-input"
    >
    
    <style>
    .login-input {
        background: transparent content-box;
        box-sizing: border-box;
        width: 90%;
        height: 0;
        padding: 15px 5%;
        outline: none;
        border: none;
        border-bottom: 1px solid #333;
        margin-bottom: 20px;
    }
    </style>

第一次发文, 请指教蟹蟹٩('ω')و