如何修改Chrome记住密码后自动填充表单的黄色背景

LuckXinXin

于 2021-02-26 09:25:58 发布

阅读量305

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/LuckXinXin/article/details/113844766

版权

CSS 专栏收录该内容

293 篇文章

订阅专栏

本文介绍了Chrome浏览器中input表单自动填充导致的样式问题及其解决方案，包括在form标签上设置autocomplete属性为'off'来关闭自动填充，以及使用CSS修改input[type=search]的样式，移除默认的小图标并自定义背景图片。同时，文章还展示了如何美化搜索框右侧的小图标，通过CSS伪元素和背景图片实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete="off"
解决方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}