为什么输入文本后我的输入字段的背景颜色会改变？

Question

我有一个表格，每个元素中的输入字段的背景颜色为：透明。当我在输入字段中输入文本时，输入字段的背景颜色变为灰色。

有人知道为什么颜色会改变以及我可以采取什么措施来防止这种情况吗？

谢谢！

Answer 1

原因是因为自动完成功能被打开，你可以用它来改变颜色；

/* Change the white to any color */
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;
}

您可以选择除透明之外的任何颜色，如果您需要颜色透明，则存在某些解决方案

这里是答案和其他解决方案的链接删除 Chrome 自动完成的输入背景颜色？

Answer 2

td input:focus{
    background: transparent;
}

我认为这应该可以解决这个问题，假设您的输入位于

<td>

标签内。您可以将该查询更改为任何内容，只要您在

:focus

上选择它即可。

Answer 3

正如你所说，你有“背景颜色：透明”，它很好，但是：焦点状态是元素的不同状态，你可能有另一个正在改变输入字段的焦点状态的CSS，我建议使用

input:focus{
    background-color: transparent; /* or any other color you want when user starts typing in input */
}

还要确保任何其他类不会影响该输入，找到该类名称，您就可以这样做

.classname:focus{
    background-color: red; 
}