CSS：删除密码文本输入绿色下划线 - Chrome 自动填充答案

【问题标题】：CSS: Remove Password Text Input green underline - Chrome AutofillCSS：删除密码文本输入绿色下划线 - Chrome 自动填充
【发布时间】：2020-08-16 15:01:33
【问题描述】：

如何删除添加到登录表单password 字段的亮绿色下划线，我认为这是 chrome 正在添加的。我目前使用materializecss 的设计虽然很小，但它看起来很奇怪并且改变了表单的美感。我已经使用下面的代码使 chrome 自动填充框透明。

@-webkit-keyframes autofill {

    0%,
    100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s;
    /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

Materialize 根据其设计主题添加teal 下划线。我想保留它。

【问题讨论】：

标签： css google-chrome authentication frontend autofill

【解决方案1】：

我猜错了，Chrome 不是罪魁祸首。下划线由materializecss添加

      <input type="password" name="password" class="validate">

Validate 我在密码字段中启用的类，亮绿色表示有效，红色表示无效。我个人认为这是违反默认的Teal 下划线设计。删除相同。

      <input type="password" name="password">

【讨论】：