Chrome输入自动填充问题答案

【问题标题】：Chrome input autofill issueChrome输入自动填充问题
【发布时间】：2020-08-23 08:08:11
【问题描述】：

对不起，如果这是重复的，但我找不到答案。我目前正在尝试禁用自动完成并从 chrome on :active 等中删除默认样式。我尝试了各种示例，但一无所获。

<input
   type="email"
   name="email"
   className={style['form-control']}
   id="exampleInputEmail1"
   aria-describedby="emailHelp"
   required
   onComplete="off"
   onChange={(e) => this.onChange(e)}
></input>

.form-control {
   background-color: $bg3 !important;
   width: 100% !important;
   color: #D7E5F0 !important;
   font-size: 14px !important;
   padding: 7px 15px !important;
   border: none !important;
}

铬： https://gyazo.com/cb8354cecb39fc9d8f479b4d5ecca3f7

【问题讨论】：

属性应该是autocomplete="off" 而不是onComplete="off"。

标签： css reactjs google-chrome

【解决方案1】：

现在使用以下代码找到了修复：

.form-control,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    background-color: $bg3 !important;
    color: #D7E5F0 !important;
    outline: none;
    border: none !important;
    -webkit-text-fill-color: #D7E5F0 !important;
    -webkit-box-shadow: 0 0 0 30px $bg3 inset !important;
}

【讨论】：