Chrome：用户代理样式表会关闭透明背景

Question

我遇到了一些类似的问题：

Override browser form-filling and input highlighting with HTML/CSS 和 chrome : how to turn off user agent stylesheet settings?

但不幸的是，没有什么能帮助我解决我的问题。

我有一个网页，我将所有输入的背景设置为透明。

在chrome中，由于用户代理样式表，它保留了黄色背景，我无法将其设置为白色或其他颜色。我不能从开发设置中关闭，因为用户不会意识到这一点。

我需要一个css或jquery解决方案。

请帮忙。

更新 - 1

https://jsfiddle.net/hiralvadodaria/8b7a4o23/21/

使用这个CSS没有运气：

    input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    background:none !important;
    background-color: rgb(0,0,0,0) !important;

    background-image: none !important;
    color: rgb(0, 0, 0);
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

这是小提琴。但我无法在那里保存用户名/密码，因此无法显示确切的问题。

从我的项目中找到一张图片。

Answer 1

    input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

试试这个

<强>更新

如果上面的代码由于某种原因不适合你，这是另一个：

@-webkit-keyframes autofill {
        to {
            color: #fff;
            background: transparent;
        }
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-animation-name: autofill;
        -webkit-animation-fill-mode: both;
    }