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

时间:2022-09-01 20:23:57

如果是纯色背景,直接通过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;
}