CODEWITHSUNDEEP
cssgoogle-chromeautofill
user7201898
user7201898

Reputation: 134

Chrome Autofill CSS + Background Image

So... I got these inputs (sort of) working in Chrome but the Auto fill classes are still giving me trouble with background images.

I need to add a background image to the input field based on success or error and I haven't found a working solution minus turning off the forms auto-complete.

Here is a CodePen if curious: https://codepen.io/jinch/pen/wvmrGGJ?editors=1100

And a code snippet of the same:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;  
}

input {
    background-color: #eee !important;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .0) 75%, rgba(255, 255, 255, .0)) !important;
      background-size: 32px 32px !important;
      background-repeat: repeat !important;
    transition: background-position 60000s linear !important;
      background-position: 4000000px !important;
    
}


/* this shiz is just for demo 👇*/
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(175,174,238);
  background: radial-gradient(circle, rgba(175,174,238,1) 0%, rgba(148,187,233,1) 100%);
}
form {
background-color: rgb(255, 255, 255);
    padding: 30px;
    border-radius: 4px;
    width: 600px;
    margin: 0 auto;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.07);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/">
  <div class="form-group">
    <input type="text" class="form-control input-lg" id="exampleInputFirst" placeholder="First Name">
  </div>
  <div class="form-group">
    <input type="text" class="form-control input-lg" id="exampleInputLast" placeholder="Last Name">
  </div>
  <div class="form-group">
    <input type="email" class="form-control input-lg" id="exampleInputEmail" placeholder="Email">
  </div>
 
  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

This works when typing in the field but if populating with the auto complete the background image is removed.

Is there any straight forward solution to work around this in Chrome?

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
}

input {
    background-color: #eee !important;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .0) 75%, rgba(255, 255, 255, .0)) !important;
      background-size: 32px 32px !important;
      background-repeat: repeat !important;
    transition: background-position 60000s linear !important;
      background-position: 4000000px !important;
}

Upvotes: 1

Views: 625

Answers (1)

Yudono Putro Utomo
Yudono Putro Utomo

Reputation: 162

use -webkit-background-clip:text; to remove chrome autofill effect

add input to transparent and set wrapper to add background image

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
     -webkit-background-clip: text;
}


/* This is for testing purposes */
input, .input-wrapper {
    background-color: #eee !important;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4) 25%, rgba(255, 255, 255, .0) 25%, rgba(255, 255, 255, .0) 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, rgba(255, 255, 255, .0) 75%, rgba(255, 255, 255, .0)) !important;
      background-size: 32px 32px !important;
      background-repeat: repeat !important;
    transition: background-position 60000s linear !important;
      background-position: 4000000px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/">
  <div class="form-group">
    <div class="input-wrapper">
      <input type="text" class="form-control input-lg" id="exampleInputFirst" placeholder="First Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-wrapper">
    <input type="text" class="form-control input-lg" id="exampleInputLast" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <div class="input-wrapper">
    <input type="email" class="form-control input-lg my-input" id="exampleInputEmail" placeholder="Email">
    </div>
  </div>
 
  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

see https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

Upvotes: 1

Related Questions