删除黄色背景自动填充输入答案

【问题标题】：Remove yellow background autofill input删除黄色背景自动填充输入
【发布时间】：2016-08-31 09:14:06
【问题描述】：

我正在寻找从自动填充输入中删除黄色背景的解决方案。我发现了这个问题Removing input background colour for Chrome autocomplete? 但问题是，我有输入线性背景

background: linear-gradient(to bottom, red 0%, black 100%);

所以这个带有 -webkit-box-shadow: 0 0 0px 1000px white inset; 的解决方案不起作用...

如果这不可能，我至少需要在此输入中更改 SVG 的填充。因为问题是，我在这里有一个白色的 SVG 图标，当背景颜色变为黄色时，真的很难看到它...

.svg {
    fill:black;
}

【问题讨论】：

不幸的是，Chrome 无法覆盖此样式。 box-shadow 选项只是将它隐藏起来......我担心你正在输掉战斗而不是用替代元素完全替换输入。
我添加了另一种可能性..

标签： css input background autofill linear-gradients

【解决方案1】：

一切都容易多了，只需添加：

input{
filter: none;
}

【讨论】：

【解决方案2】：

设置输入值例如： --- 输入 class="form-control form-control-solid placeholder-no-fix" type="text" placeholder="Usuário" name="username_insta" required="" Value="some" --

如果您设置值 Chrome 不会自动完成输入并且颜色不会改变... 之后，执行一些明确的表格。

function clearForms() {
// variable declaration
var x, y, z, type = null;
// loop through forms on HTML page
for (x = 0; x < document.forms.length; x++) {
    // loop through each element on form
    for (y = 0; y < document.forms[x].elements.length; y++) {
        // define element type
        type = document.forms[x].elements[y].type;
        // alert before erasing form element
        //alert('form='+x+' element='+y+' type='+type);
        // switch on element type
        switch (type) {
        case 'text':
        case 'textarea':
        case 'password':
        //case "hidden":
            document.forms[x].elements[y].value = '';
            break;
        case 'radio':
        case 'checkbox':
            document.forms[x].elements[y].checked = '';
            break;
        case 'select-one':
            document.forms[x].elements[y].options[0].selected = true;
            break;
        case 'select-multiple':
            for (z = 0; z < document.forms[x].elements[y].options.length; z++) {
                document.forms[x].elements[y].options[z].selected = false;
            }
            break;
        } // end switch
    } // end for y
} // end for x

}

为我工作...

【讨论】：

【解决方案3】：

实际上有一个使用 box-shadow 的解决方案。您非常接近另一个问题的解决方案。
诀窍是使用多个阴影。

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 .5em 1em 0 red,
                        inset 0 -.5em 1em 0 black;
}

&lt;input id="email" name="email" type="email"&gt;

【讨论】：

不工作 - 中间仍然是黄色 - 如果你将输入设置得更高，你会看到
@Annie 输入有多高？然后相应地调整阴影大小。

【解决方案4】：

如果您需要更改 SVG 填充/描边，在 SVG 代码中更改它可能是最简单的。我不知道您是如何引入 SVG 的，但在 SVG 代码中，您需要搜索填充和描边，直到找到需要更改的元素。

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

【讨论】：

嗯，这不是一个解决方案 :( - 我可以更改 svg 颜色，但我只需要在自动填充输入中为这个 svg 设置不同的颜色..
你是如何引入 svg 的？ SVG 标签、IMG 标签等？