理系学生日記

おまえはいつまで学生気分なのか

Chromeのautofillによりテキストフィールドが謎の黄色になってしまう

Chrome で input フィールドに履歴から入力した後、テキストボックスの色が悲しい黄色になる。 この挙動に困った人もいると思います。

この挙動については、かなしいですが非バグとされていて、データが autofill されたことをユーザが分かるようにっていう WebKit からの設計思想だってことになっているようです。

We inherit this coloring behavior from WebKit and I believe it's by design. It allows the user to understand the data has been prefilled.

そういうわけで、何人もの人がこの挙動に困っていて、どうもこの修正のスタンダードな方法は -webkit-box-shaddow で背景色を上書きするっていう方法のようです。

/* Change the white to any color ;) */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

inset で、テキストボックスの内側に「影」として色付けをするっていう方法。たしかにうまくいきますね。

その他参考