【css】如何修改input选中历史选项后，自动填充的蓝色背景色

在CSS中，可以使用 input 选择器来修改文本框在自动填充时选项的背景颜色。然而，出于浏览器的隐私和安全考虑，自动填充的样式是有限的，并不能完全自定义。对于自动填充的选项背景色，可以使用 input:-webkit-autofill 伪类选择器来修改。

以下是一个示例代码，展示如何修改input在自动填充历史选项后的蓝色背景色：

/* 修改WebKit内核浏览器的自动填充样式 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset; /* 背景色设置为白色 */
    border: 1px solid #ccc; /* 边框颜色根据需要修改 */
    -webkit-text-fill-color: #333; /* 文字颜色根据需要修改 */
    transition: background-color 5000s ease-in-out 0s; /* 过渡效果设置为避免自动填充的背景色改变 */
}
 
/* 针对Firefox浏览器的自动填充样式 */
input:-moz-ui-text-filled {
    -moz-box-shadow: 0 0 0px 1000px white inset !important; /* 背景色设置为白色 */
    border: 1px solid #ccc; /* 边框颜色根据需要修改 */
    transition: background-color 5000s ease-in-out 0s; /* 过渡效果设置为避免自动填充的背景色改变 */
}

请注意，由于浏览器厂商的安全和隐私考虑，自动填充的样式是受限的，并且在不同的浏览器中表现可能不同。上述代码主要针对WebKit内核的浏览器（如Chrome、Safari）以及Firefox浏览器。

此外，transition 属性的使用是为了防止自动填充的背景色在选择某个选项后立即改变。transition-delay 设置为 5000s 是为了模拟一个非常长的过渡时间，实际使用时应该设置一个很大的值或者将其设置为 0s，取消该效果。