Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS

この黄色、どうやったら消えるんだよ、背景色上書きしてくれないし、outlineをnoneにしても駄目だしうわー！
…諦めよう。

ってスタンスだったんだけど、気になったので調べてみたらあった。

結論としては、こう！

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

この「white」の部分を任意の色にRGBでも何でも入れて貰えれば。

出典はみんな大好きstackoverflow。
http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

理屈としては、あの忌々しい黄色の指定は、開発ツールとかで見ると具体的なCSSファイルがなくて「user agent stylesheet」っていう、Chromeが自ら持ってるスタイルシートで指定されています。

こんな感じ。

input:-webkit-autofill, textarea:-webkit-autofill {
	background-color: rgb(250, 255, 189);
	background-image: none;
	color: rgb(0, 0, 0);
}

CSSで上書きすればいいんじゃねーの？って話なんだけど、なんかだめ。
ということで、背景色の上にshadowをひいてごまかそうというのが今回の解決案。

なるほど。

ほんまstackoverflowさまさまやで。