input搜索框：根据历史记录自动填充后，去除默认黄色背景

转载于 2019-01-10 15:55:00 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangxiaohang/p/10250460.html

文章标签：

#javascript #ViewUI

本文介绍如何使用CSS解决网页表单中输入框自动填充时的颜色和背景问题，通过box-shadow和transition属性实现对不同背景下的自动填充样式的覆盖。

如果是纯色背景，直接通过box-shadow覆盖即可：

input:-webkit-autofill {
  color: #333!important;
  -webkit-text-fill-color: #333;
  box-shadow: 0 0 0 1000px #eaeaea inset
}

input:autofill {
  color: #333!important;
  -webkit-text-fill-color: #333;
  box-shadow: 0 0 0 1000px #eaeaea inset
}

如果是透明色背景，通过transition设置足够长的变色推迟：

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    -webkit-transition: background-color 43200s ease-in-out 0s;
    transition: background-color 43200s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-transition: background-color 43200s ease-in-out 0s;
    transition: background-color 43200s ease-in-out 0s;
}