如何使用 CSS 覆盖默认浏览器表单自动填充和突出显示？

使用 CSS 覆盖默认浏览器表单行为

Web 浏览器通常会自动填充表单字段并以黄色背景突出显示输入字段。虽然对于某些用户来说很方便，但在某些情况下可能并不理想。让我们探讨如何在 HTML 和 CSS 中覆盖这些默认行为。

禁用表单自动填充

要防止表单自动填充，请使用表单标签。例如：

<form autocomplete="off">
  ...
</form>

但是，并非所有浏览器都完全支持此属性。

删除输入突出显示

覆盖默认值输入字段的黄色背景突出显示，使用以下 CSS 规则：

input:-webkit-autofill {
  background-color: #fff !important; /* Change to desired color */
}

此代码设置背景由浏览器自动填充的输入字段的颜色。通过使用 !important，您可以确保此规则优先于任何其他样式。

其他提示

如果上述 CSS 规则在较新版本中不起作用Chrome 的，尝试使用这个技巧：

input:-webkit-autofill {
  box-shadow: 0 0 0 50px white inset; /* Change color to background */
  -webkit-text-fill-color: #333;
}

这会在输入字段周围创建一个“强烈”阴影，有效隐藏黄色背景。

以上是如何使用 CSS 覆盖默认浏览器表单自动填充和突出显示？的详细内容。更多信息请关注PHP中文网其他相关文章！