Search code examples
javascripthtmlcsssassscss-lint

How to change input name background?

When I click the mouse on input, Drop down the mailing list, When I bring the mouse to Miles Is changing input background. As shown in the photo. How to remove or change this time input background?

enter image description here

I have already tried "focus", But it didn't work.

<input type="email" name="email" placeholder="Email">

    input {
        background: none;

        &:focus {
            background: none;
        }
    }
Solution

  • For Google chrome you can do the following:

    input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
    <input type="text" name="name">

    Replace white for the desired color. I took this snippet from this SO answer. It should also be a good idea to take a deeper look into that SO question has there are slightly different solutions that might work better for you.

    Keep in mind that this is non standard and its use should be avoided but for now, this is what you can do. Ref: MDN