谷歌浏览器input输入框背景透明色 input:-internal-autofill-selected

背景：需要实现这样一个登录样式，input 框背景透明

但在实现过程中发现input 框有默认值时总是有个背景去不掉， 发现是浏览器默认样式 input:-internal-autofill-selected 导致的。

问题描述中的 "input:-internal-autofill-selected" 是一个CSS伪类选择器，主要用于处理Web浏览器自动填充表单输入时的样式问题。

然而，这个选择器并不是所有浏览器都支持，因为它是非标准的，并且不是所有浏览器都公开了这样的伪类。例如，Chrome浏览器就使用了类似的机制，但是没有公开类似的伪类。

如果你想要处理浏览器自动填充表单输入的样式问题，可以使用一些替代方法。

方法一 ：如果不是想设置为透明色 可直接使用box-shadow

给input 加box-shadow 样式：但是这种方法对于背景有纹路的背景图不太合适，适合纯色背景的

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      box-shadow: 0 0 0 1000px #153a81 inset !important;
      // box-shadow: 0 0 0 1000px #053d82  inset !important;
      -webkit-text-fill-color: #ffffff !important;
    }

方法二 ：通过CSS3动画解决

input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-transition-delay: 111111s;
        -webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
    }