Removing yellow background on autocompleted inputs (in Chrome/Webkit)

Hacks for removing forced yellow background on autocompleted inputs (in Chrome/Webkit)

by Konstantin Rouda

HTML

<h3>Note: in order to see the effect you need to fill the inputs with some value,
  submit the form, after that dobule click into each input in order to trigger the autocomplete</h3>


<form method="post">
  <h4>Input without any change</h4>
  <p class="c-input-group">
    <label class="c-input-group__label">Default behavior</label>
    <input type="text" class="c-input-group__input o-input" name="default-input" id="default-input" />
  </p>

  <h4>Background color is changed from pale yellow (default value for autocompleted input)</h4>
  <p class="c-input-group">
    <label class="c-input-group__label">Remove default background</label>
    <input type="text" class="c-input-group__input c-input-group__input--overridden-bg  o-input" name="changed-bg-input" id="changed-bg-input" />
  </p>
  
  <h4>Chrome's forched text-color is changed (default value for autocompleted input text is rgb(0, 0, 0))</h4>
  <p class="c-input-group">
    <label class="c-input-group__label">Change default text-color</label>
    <input type="text" class="c-input-group__input c-input-group__input--overridden-text-color  o-input" name="changed-text-color-input" id="changed-text-color-input" />
  </p>

  <h4>Change forced background color, on :focus, :hover, and other states</h4>
  <p class="c-input-group">
    <label class="c-input-group__label">Change forced background color, on :focus, :hover, and other states</label>
    <input type="text" class="c-input-group__input c-input-group__input--overridden-bg-on-state  o-input" name="changed-bg-on-state-input" id="changed-bg-on-state-input" />
  </p>
  
  <h4>Fully transparent background for autocompleted fields</h4>
  <p class="c-input-group">
    <label class="c-input-group__label">Fully transparent background for autocompleted fields</label>
    <input type="text" class="c-input-group__input c-input-group__input--transparent-bg  o-input" name="transparent-bg" id="transparent-bg" />
  </p>
  
  <h4>Semi transparent background for autocompleted...

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(253, 254, 253);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

FORM {
  background: aliceblue;
}

/*Actual Style*/
.c-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.o-input {
  font-size: 1rem;
  border-radius: 0.1rem;
  border: 3px solid rgba(0, 0, 0, .45);
}

.o-submit-btn {
  padding: .75rem 1.5rem;
  border: 3px solid;
  border-radius: .15rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .17);
  background: transparent;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: bold;
  cursor: pointer;
}

/* 1. Overwrite Chrome’s forced yellow background color
------------------------*/
.c-input-group__input--overridden-bg:-webkit-autofill {
  box-shadow: 0 0 0 100rem #fff inset;
}


/* 2. Overwrite Chrome’s forced text color
------------------------*/
.c-input-group__input--overridden-text-color:-webkit-autofill {
  -webkit-text-fill-color: rgba(50, 200, 150, .9);
}


/* 3. Change forced background color, on :focus, :hover, and other states
-----------------------------------*/
.c-input-group__input--overridden-bg-on-state:-webkit-autofill:focus,
.c-input-group__input--overridden-bg-on-state:-webkit-autofill:hover,
.c-input-group__input--overridden-bg-on-state:-webkit-autofill:active {
  box-shadow: 0 0 0 100rem #fff inset;
}


/* 4. Fully transparent background for autocompleted fields
-----------------------------------*/
.c-input-group__input--transparent-bg {
  background:...

JavaScript

/*
from: http://webagility.com/posts/the-ultimate-list-of-hacks-for-chromes-forced-yellow-background-on-autocompleted-inputs
*/