JSFiddle - React, Tailwind, and code Playground

by Josh Davison

HTML

<p>Tested in Chrome 69.</p>

<form action="/">
    <label for="first_name">First name <span>*</span></label><input type="text" name="first_name" id="first_name" placeholder="First name" required>
    <label for="last_name">Last name <span>*</span></label><input type="text" name="last_name" id="last_name" placeholder="Last name">
    <label for="postcode">First name <span>*</span></label><input type="text" name="postcode" id="postcode" placeholder="Postcode" required>
    <input type="submit" value="Submit" required />
</form>

<p>The body background is blue. The inputs have a white background by default. Usually when you use webkits auto-complete, it forces a yellow background and black text colour on the input field that can't be overridden using traditional methods. <a href="https://stackoverflow.com/a/37432260/5509846"
        target="_blank">Steve at Stack Overflow</a> has identified a way of being able to override that yellow in a relatively unhacky way (certainly less so than by simply setting a transition delay of 99999s).</p>

<p>In this demo, I have left the first name using the defaults. The last name gets a background color of green and text color of maroon using Steve's method, and the postcode gets a transparent background and text color of maroon using Steve's method.</p>

<p>
    This is a particularly important issue for us when using our adaptive placeholders, as we need the background to be transparent so that you can read the lables which are sat behind the form element so that the label doesn't interfere with the form elements
    behaviour.
</p>

CSS

/* SOLUTION */

@-webkit-keyframes autofill-pcode {
    to {
        color: #85144b;
        background: transparent;
    }
}

@-webkit-keyframes autofill-sname {
    to {
        color: #85144b;
        background: #01FF70;
    }
}

#postcode:-webkit-autofill {
    -webkit-animation-name: autofill-pcode;
    -webkit-animation-fill-mode: both;
}

#last_name:-webkit-autofill {
    -webkit-animation-name: autofill-sname;
    -webkit-animation-fill-mode: both;
}

/* FOR PRESENTATION PURPOSES ONLY */

/* FOR PRESENTATION PURPOSES ONLY */

/* FOR PRESENTATION PURPOSES ONLY */

/* FOR PRESENTATION PURPOSES ONLY */

/* FOR PRESENTATION PURPOSES ONLY */

body {
    background: #7FDBFF;
    font-family: tahoma, verdana, arial;
    font-size: 18px;
    padding: 1em;
}

input,
select {
    -webkit-appearance: none;
    padding: 0.5em;
    margin: 0.5em 1.5em 0.5em 0.5em;
    border: 1px solid gray;
    border-radius: 0.5em;
    font-size: 18px;
    color: #000000;
}

input[type="submit"] {
    background-color: #001f3f;
    color: #DDDDDD;
    border: #000000;
    cursor: pointer;
    padding: 0.5em 1em;
}