Initial Googling shows that this isn't as straightforward as it should be.

Webkit browsers provide the -webkit-autofill pseudo class but setting the background on that, even with !important has no effect on the input fields.

.mw-ui-input {
        // Remove auto fill styling
        &:-webkit-autofill {
                background-color: #fff !important;
        }
}

(this does nothing)

One of the popular hacks suggests using a large box-shadow to cover up the background, something like —

.mw-ui-input {
        // Remove auto fill styling
        &:-webkit-autofill {
                -webkit-box-shadow: 0 0 0px 1000px white inset;
        }
}

But, doing this isn't an option either as we're already using a box-shadow to draw our focus state.

Will take another look at this next week. Suggestions are welcome!

Is this really needed?

We're not removing the Autofill predictions, only the yellow background which causes inconsistency between field elements. So to increase UI consistency yes, we'll need to make this change.

This seems like an anti-pattern, breaking a standard Web feature in the name of design consistency on a page that returning users won't see very often (if at all) and on which for new users it won't occur. I'd advise against it.

@Jdforrester-WMF I'd argue that very few people have any idea what the yellow field background means, and autofill ≠ yellow in most users minds, e.g. they see autofill and type ahead in more contexts where there is no yellow background than ones where the background is yellow

Take a look at some top 10 sites, how many of them use the yellow autofill on their login and other form fields? in my preliminary search, none.

There doesn't seem to be a non-hacky fix for this, and I don't want to resort to JavaScript to do this.
Upstream bugs - 1334 and 46543 documents this.