Remove New Firefox Autofill Color

Remove new Firefox autofill color

Firefox 94 and newer

Just change the input's background color in your css:

input:autofill {
  background: #fff; /* or any other */
}

If you wish to remove the autofill background only in your Firefox browser, set layout.css.autofill.background to false in about:config.

Firefox 67 (2019-05-21) - 94 (2021-11-02; excluding)

Add this to your css:

input {
  filter: none;
}

Why? At the bottom of view-source:resource://gre-resources/forms.css we can see this:

:-moz-autofill, :-moz-autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}

And that is the cause of the yellow autofill background color.

Remove the yellow background on input on autofill

Oddly enough this is the intended behaviour from webkit to let the user infer it was autofilled.

ben@chromium.org
We inherit this coloring behavior from WebKit and I believe it's by design. It allows the user to understand the data has been prefilled.

You can use:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

Which will change the background to white.

You can also turn auto complete off by adding:

autocomplete="off"

E.g

<input type="text" name="some_name" autocomplete="off"></input>

To your input, but for usability I would suggest against this.

Cannot set white background to HTML input in Mozilla

In your example the background in perfectly white. I think, there is some other code, that affects your input. Try to make it more specific using the ID #username.

Or, you can use !important rule.

UPDATED

Added the third way. It may be an autocomplete background of browther. Try the code below.

input#username {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  border: 1px solid #A6A6A633;

  border-radius: 2px;

  opacity: 1;

  background: #fff !important;

  color: #9B9B9B;

}

input#username:-moz-autofill,

input#username:-moz-autofill-preview,

input#username:-webkit-autofill {

  filter: none;

  background: #fff !important;

}

<div class="form-group">

  <label for="username">User Name: </label>

  <input type="text" id="username" [(ngModel)]="username" placeholder="Enter User Name" name="username">

</div>

Change font color of autofill input field

Try the below CSS

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #999;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #999;
}

How to change the style of :-webkit-autofill?

It's not background-color that gets rid of that yellow/orange, it's the box-shadow:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px #fff inset;
    -moz-box-shadow: 0 0 0 100px #fff inset;
    box-shadow: 0 0 0 100px #fff inset;
}

How to change Safari autofill yellow background color

Was reading that most browsers want to indicate autofill (with Safari being a bit more adamant with this indication).

I did find an alternative hack, where you use the -webkit-box-shadow to cover the background color. Upon inspection, trying to target the specific input with a class doesn't work (i.e. specificity).

In Safari, (10.0.2), the browser adds shadow content as the user agent, which includes the background-color and the value of the autofill. The issue here is that, the browser prohibits the the editing of those specific styles (such as background-color), therefore the reason for the answer below.

input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}

if you also have a border-bottom in the input

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

Source:

- medium-post

- stackoverflow discussion

- why-browsers ignore autocomplete="off"

How to avoid Chrome hide background image and color over an autofill input?

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177,
0.45).

For Background: transparent won't work here so please use colors.

/* Change the white to any color ;) */
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;
}

for text color:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Your Solution:(for above case)

Use separate div for icon and for input

.form-section .form-control {

 

 font-size: 16px;

  width: 100%;

  margin-left: 9px;

}

.form-section .form-control:focus {

 -webkit-box-shadow: none;

 box-shadow: none;

}

.form-section .form-group {

 margin-bottom: 21px;

}

.icon-email {

 background-image: url('https://i.stack.imgur.com/xhx3w.png');

  background-repeat: no-repeat;

    background-position: center center;

    width: 30px;

    height: auto;

}

.icon-pass {

 background-image: url('https://i.stack.imgur.com/910l0.png');

  background-repeat: no-repeat;

    background-position: center center;

    width: 30px;

    height: auto;

}

.form-btn {

  padding:10px;

    background-color: #65a3fe;

    border: none;

    color: #ffffff;    

    font-size: 18px;

    font-weight: 700;

}

.input-txt{

    padding-left: 5px;

    float:left;

    border-left:none;

    outline:none ;

    border: none;

    background-color: #f7f8fa;

}

.custom-input {

    display: flex; 

    border-radius: 4px;

 background-color: #f7f8fa !important;

 border: none;

 height: 51px;

}

input:-webkit-autofill,

input:-webkit-autofill:hover, 

input:-webkit-autofill:focus, 

input:-webkit-autofill:active  {

    -webkit-box-shadow: 0 0 0 30px #f7f8fa inset !important;

}

<div class="form-section">

    <form>                                 

        <div class="form-group custom-input">

        <div class='icon-email'></div>

            <input title="Email" type="email" class="form-control input-txt" name="email" placeholder="Your email address" value="">

  </div>

        <div class="form-group  custom-input">

        <div class='icon-pass'></div>

            <input title="Password" type="password" class="form-control input-txt" name="password" placeholder="Your Password">

  </div>

        <button type="submit" class="btn btn-primary form-btn">Log in</button>

    </form>

</div>

---

Related Topics