如何使用 HTML 和 CSS 覆盖浏览器自动填充和输入突出显示？

使用 HTML/CSS 覆盖表单自动填充和输入突出显示

在 Web 开发中，删除浏览器生成的自动填充建议和输入突出显示可能会出现问题，尤其是在处理在同一页面上有多个表单。本文解决了这两个问题，提供了覆盖自动填充并删除黄色背景突出显示的解决方案。

自动填充：

浏览器自动建议以前在中输入的信息输入字段。虽然对某些用户来说很方便，但当同一页面上的不同表单不应自动填充时，这可能会出现问题。要禁用特定输入的自动填充，请使用自动完成属性：

<form>
  <input type="text" name="username" autocomplete="off">
  <input type="password" name="password" autocomplete="off">
  <input type="submit" value="Submit">
</form>

输入突出显示：

默认情况下，浏览器在输入字段时应用黄色背景是专注的。可以使用 CSS 覆盖此行为。 :focus 伪类针对当前处于焦点的任何元素。以下是使用 CSS 删除黄色突出显示的方法：

input:focus {
  background-color: transparent;
}

但是，请注意，此解决方案不再适用于最新版本的 Chrome。相反，请使用以下技巧：

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

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

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