【css】input选择输入历史后样式改变

原文链接：https://blog.csdn.net/muzidigbig/article/details/103367026 CSDN博主【muzidigbig】

一、修改选择背景色

   **chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

方式一

 input:-webkit-autofill,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
     background-color: transparent!important;
     background-image: none !important;
     -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }

用足够大的纯色阴影去覆盖掉黄色背景
在写实际代码之前做好CSS样式重置可避免一系列稀奇古怪的问题。 

方式二

禁用选择输入历史
为input设置autocomplete=“off”
当input过多时，可以设置js
$(function () {
    $("input").attr("autocomplete", "off");
});

 

二、修改选择字体颜色

input:-webkit-autofill {
    /* 选择历史记录的文字颜色*/
    -webkit-text-fill-color: #666;
}

 

若怕出错，将下面的代码复制进去即可：

/* 选择历史记录的文字颜色和背景颜色 */
input:-webkit-autofill {
    -webkit-animation: autofill-fix 1s infinite!important;
    /* 选择历史记录的文字颜色*/
    -webkit-text-fill-color: #666;
    -webkit-transition: background-color 50000s ease-in-out 0s!important;
    transition: background-color 50000s ease-in-out 0s!important;
    background-color: transparent!important;
    background-image: none !important;
    /* 选择历史记录的背景颜色 */
    -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
}
[role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
input[type=number], input[type=password], input[type=text], textarea {
    -webkit-appearance: none;
}