地址自动填充时如何更改输入字段样式

时间:2019-04-24 13:49:47

标签: html css google-chrome autofill

我已经在chrome浏览器中存储了地址,因此当我填写表格时,会得到如下所示的弹出窗口: enter image description here

,当我选择一个地址时,输入字段会变成蓝色,如下所示: enter image description here

如何更改CSS,以使输入字段不会变蓝。 我已经尝试了下面的代码,没有用:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: transparent;
}

1 个答案:

答案 0 :(得分:1)

选择自动填充建议后,您将无法进行透明输入,但可以使用以下CSS在自动填充建议后更改输入字段的颜色:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

,您可以更改自动填充建议的文本颜色:

input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}