Chrome Autofill CSS Background Image-CodePudding

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