-webkit-autofill
是一个非标准的 CSS 伪类选择器,主要用于 WebKit 浏览器(如 Chrome 和 Safari)中。这个选择器允许开发者为浏览器自动填充(autofill)的输入框(如用户名、密码、地址等)定制样式。
当用户之前在浏览器中填写过表单,并且浏览器保存了这些数据,那么在下次访问相同的表单时,浏览器可能会自动填充这些输入框。这时,被自动填充的输入框就会匹配 -webkit-autofill
伪类选择器,从而可以应用特定的样式。
例如,你可以使用以下 CSS 规则来改变自动填充输入框的背景色和字体颜色:
input:-webkit-autofill {background-color: #fff !important;-webkit-box-shadow: 0 0 0 1000px #fff inset !important;-webkit-text-fill-color: #000 !important;
}
在这个例子中:
background-color
属性设置了输入框的背景色。-webkit-box-shadow
属性用于覆盖浏览器默认的黄色背景。这里使用了一个很大的阴影扩展半径(1000px)来确保整个输入框都被覆盖。-webkit-text-fill-color
属性设置了输入框中文字的颜色。
需要注意的是,由于 -webkit-autofill
是一个非标准的选择器,它可能不会在所有浏览器中都有效,并且其行为可能会在未来的浏览器版本中发生变化。因此,在使用它时应该谨慎,并确保你的网站或应用在各种浏览器中都能正常工作。
另外,出于安全和隐私的考虑,一些浏览器可能会限制对自动填充输入框的样式修改。例如,某些浏览器可能不允许你改变自动填充输入框的背景色或文字颜色,以确保用户能够清楚地识别出哪些输入框已被自动填充。