How to Avoid "-Internal-Autofill-Selected" Style to Be Applied

Override browser form-filling and input highlighting with HTML/CSS

for the autocompletion, you can use:

<form autocomplete="off">

regarding the coloring-problem:

from your screenshot i can see that webkit generates the following style:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) as #id-styles are even more important than .class styles, the following may work:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) if that won't work, you can try to set the style via javascript programmatically

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) if that won't work, ~~you're doomed :-)~~ consider this:
this wont hide the yellow color, but will make the text readable again.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) a css/javascript solution:

css:

input:focus {
    background-position: 0 0;
}

and the following javascript has to be run onload:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

eg:

<body onload="loadPage();">

good luck :-)

5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) From here:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Removing input background colour for Chrome autocomplete?

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

Material UI remove the yellow background on TextField autofill

The replacement for inputStyle would be inputProps:

const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />

InputProps vs. inputProps is a common point of confusion. Uppercase "I" InputProps provides props for the Input element within TextField (Input wraps the native input in a div). Lowercase "i" inputProps provides props for the native input element rendered within the Input component. If you want to provide inline styles to the native input element, the code example above will do the trick.

There are also several other ways to do this using classes via withStyles.

If you want to use the className property, again this needs to be on the input (rather than the div wrapping it) in order to have the desired effect. So the following will also work:

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

If you want to leverage the ":-webkit-autofill" pseudo-class, you just need to adjust your JSS syntax and add the "&" to reference the selector of the parent rule:

const styles = {
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px white inset"
    }
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);

You can also leverage either of these class approaches, but using uppercase "I" InputProps via the classes property:

const styles = {
  input: {
    WebkitBoxShadow: "0 0 0 1000px white inset"
  }
};
const MyTextField = ({classes}) => {
   return <TextField name="email" InputProps={{ classes: { input: classes.input } }} />;
}
export default withStyles(styles)(MyTextField);

Here is a working example with all of these approaches:

Edit rr9omj7q0p

Override user agent stylesheet on focus

#drip-first-name:focus, #drip-email:focus {
    outline: 0;
    border-bottom: 3px solid black !important;
}

make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.

However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.

Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.

this is how it would look to you with devtools open:

Sample Image

This is the link for you to get started with devtools:
Devtools

What would cause the error '(CSS 3.0): :-webkit-autofill is not a valid pseudo-class.'

As :-webkit-autofill is a Non-standard css pseudo-element, Visual Studio 2015 is throwing that error due to it's default configuration to correct .css errors.

What you could do is disabled it by, going into: Tools > Options > Text Editor > CSS > Advanced and then toggle uncheck Validation on the right pane. The names may slightly vary, due to the fact I'm translating from my native language.

Hope it helps!