Remove yellow background autofill input

Question

I am looking for a solution for remove yellow background from autofill input.. I found this question Removing input background colour for Chrome autocomplete? But the problem is, that I have on input linear background

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

so this solution with -webkit-box-shadow: 0 0 0px 1000px white inset; doesn't work...

If this isn't possible I need at least change the fill of SVG in this input.. Because the problem is, that I have a white SVG icon here and when the background change color to yellow it's really hard to see it...

.svg {
    fill:black;
}

Unfortunately, Chrome make it impossible to override this styling. The box-shadow option just hides it...I'm afriad you are on loosing battle otehr than complete replacement of the input with substitute elements. — Paulie_D, May 05 '16 at 14:21

score 0 · Answer 1 · answered May 05 '16 at 14:51

0

If you need to change the SVG fill/stroke, it may be easiest to change it in the SVG code. I am unaware of how you are bringing in the SVG, but in the SVG code, you will need to search for fill and stroke until you find the element that you need to change.

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

answered May 05 '16 at 14:51

EliTownsend

181
11

Hmm this is not a solution :( - I can change a svg color, but I need the different color for this svg only in the autofill input.. – Annie The Cross May 05 '16 at 14:57
How are you bringing in the svg? SVG tag, IMG tag, etc? – EliTownsend May 05 '16 at 14:58

score 0 · Answer 2 · answered May 05 '16 at 14:58

0

There is actually a solution that uses box-shadow. You were very close with the solution from the other question.
The trick is to use multiple shadows.

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

<input id="email" name="email" type="email">

answered May 05 '16 at 14:58

Mr Lister

45,515
15
108
150

Not working - it's still yellow in the middle - if you make the input heigher you will see – Annie The Cross May 05 '16 at 15:48
@Annie how high is the input? Then adjust the shadow size accordingly. – Mr Lister May 05 '16 at 17:06

score 0 · Answer 3 · answered May 19 '16 at 14:20

Set Value on input ex: --- input class="form-control form-control-solid placeholder-no-fix" type="text" placeholder="Usuário" name="username_insta" required="" Value="some" --

if you set value the Chrome not auto complete input and the color not change... after this, execute some clear form.

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

}

Works for me...

score 0 · Answer 4 · answered Dec 18 '20 at 09:45

0

Everything is much easier, just add:

input{
filter: none;
}

answered Dec 18 '20 at 09:45

Maxim

1

Remove yellow background autofill input

4 Answers4