Background Autofill

A way to get rid of yellow autofill, or change the color of it .

by Vanessa RC

HTML

<form>
  <ul>
    <li>
      <div>e-mail</div><br/>
      <input type='text' name='email'  placeholder='e-mail' autocomplete='email' > 
    </li>
    <li>
      <div>password</div><br/>
      <input type='text' name='password'  placeholder='password' autocomplete='password'>
    </li>
   </ul>
</form>

CSS

// Settings some style to the form 
// to make it more understandable. 
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Lato:300);
*:focus{
  outline: none;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 10px;
}

input{
  margin: 0;
  padding: 10px;
  border-radius: 4px;
  border: none;
  
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
  font-weight: light;
  colour: #aaaaaa;
}

// This is the part where the 
// autofill background, yellow color 
// disappears. 
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


div {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
  font-weight: 300;
  colour: #333;
}

JavaScript

/* A way to turn autocomplete off from CHROME 
would be just setting autocomplete off from the form 

<form autocomplete='off'>

or from the input field 

<input type='text' value='email' autocomplete='off'>
<input type='text' value='password'>

That would turn off the email autocomplete, but not passworld. 

*/