Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Chromeのオートコンプリートの背景色を消す

More than 1 year has passed since last update.

動機

autocomplete属性をoffにしてるにも関わらず入力が補完された。
そのせいで、ラベルにオートコンプリートの背景色が被さってしまいラベルの一部が隠れるような状態になった。
ちょっと検索しても出てくる情報はbox-shadowで背景色を隠すものがほとんどでそうなるとデザインを変更しないといけなくなるためこの方法は使えない。
で、さらに調べて以下の方法で背景色を変更できることを確認した。

対処法

@keyframes onAutoFillStart { from {} to {}}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s;
}

やってることとしては、Chromeでオートコンプリートが発生した要素については-webkit-autofillという属性が付くのでその要素に対してアニメーションを使用して背景色の変更を行なっている。
background-colorに対して!importantを使用しても変更できなかったが、上記の方法だとなぜかできた。

とりあえず、これで背景色については消すことができる。

tokino
フロント周りを主にやってる人。時々PHPer。
d2cdot
テクノロジーの力で『伝えたいコトを伝わるカタチに』
https://www.d2cdot.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away