首页 > web前端 > css教程 > 如何使用 CSS 覆盖默认浏览器表单自动填充和突出显示?

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

Susan Sarandon
发布: 2024-12-07 05:38:16
原创
348 人浏览过

How Can I Override Default Browser Form Autofill and Highlighting with 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板