如何去除 Chrome 中 input 自动填充背景? 下面本篇文章就来给大家介绍一下在 html 中去除 Chrome 中 input 自动填充背景的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
input 可能是平时网页中使用最多的标签之一了, 但凡需要输入的地方都少不了.
毕竟输入是一件比较麻烦的事情, 所以浏览器也做出了许多便于输入的地方, 比方说自动填充
一般情况下, 在表单提交的时候浏览器会自动记录提交的内容
这个功能本来是很好的, 不过当自动填充后, 输入框背景会自动变成淡紫色 (以前是 x 黄色, 仅限谷歌浏览器), 设计师(但凡有点审美的前端) 看到了肯定就不干了, 毕竟还是挺违和的, 那么何如去除这个默认的背景呢?
背景是如何产生的
按照以往的经验, 如果要修改标签默认的样式, 首先肯定是查看标签的默认样式, 如下
比较好理解, 当自动填充时会激活:-internal-autofill-selected 伪类, 然后就变成了淡紫色.
如果我们设置样式覆盖
- input:-internal-autofill-selected{
- background: red!important;
- }
虽然样式覆盖了, 然而并没有什么用, 仍然是默认的淡紫色(要是起作用的话就不会专门去研究这个了), 原因不明...
现有的解决方式
网上普遍的解决方式主要有两种:
1. 使用内阴影进行覆盖
既然背景改变不了, 那么就找个东西覆盖呗
- input{
- box-shadow: 0 0 0px 1000px white inset;
- }
大部分情况使用这种方式即可解决问题
2. 关闭自动填充功能
既然是由于自动填充导致的问题, 关掉就行了呀
<input autocomplete="off">
有些对信息比较敏感的情况下 (不想自动填充) 可以使用这个功能
现有解决方式的局限
首先说第二种方式, 虽然这种方式比较简单, 但是却失去了自动填充功能, 这对于用户体验是很不友好的(手动输入是一件费时费力的事情), 如果说要自定义这个功能, 那可能还需要不少的 JS 脚本(还需考虑键盘访问), 而且可能还会有意料之外的 bug, 所以一般情况下不建议去除默认功能.
那么第一种方式呢? 如果输入框是纯色的背景, 那么给一个和背景一样的阴影颜色就好了, 如果而我们设计需要的是一种透明的输入框, 那基本就凉掉了.
比如类似这样的效果, 如果被填充了还是相当难看的
更好的解决方式
下面给出两种解决方式
方式一: 利用 background-clip: content-box
既然背景改变不了, 那么就把它裁掉呗.
背景颜色默认是渲染到 padding-box 的, 我们可以设置 background-clip: content-box 只渲染到 content-box, 这样背景就看不到了(当然还需指定一下高度为 0.)~
- input{
- height: 0;
- padding: 1.2em .5em;
- background-clip: content-box;
- }
可以看到, 自动填充时的背景已经消失了, 不过还有一个小问题, 填充的文字颜色也是无法直接修改的(默认为 rgb(0,0,0)), 原因相同, 这里我们可以借助一下::first-line 伪类
- input::first-line{
- color: #fff
- }
应该算比较完美了~
https://codepen.io/xboxyan/pen/VwYKJzR
如果 demo 里面没有自动填充选项, 可以先输入一些字符, 然后 submit, 手动创建一些填充项, 下同
方式二: 利用
animation-fill-mode:forwards
设置 animation-fill-mode:forwards 后, 动画会一直停留在最后一帧, 这个已经和默认的样式不是一个维度了, 不管设置什么样式, 都会保留最后一帧状态, 比如
- <style>
- div{
- animation:resetBg .1s forwards;
- }
- @keyframes resetBg {
- to {
- background: blue;
- }
- }
- </style>
- <div style="background:red!important">div</div>
可以看到背景很轻易的就被改成了蓝色.
利用这个特性, 上面的问题就很容易了, 只需设置一个动画即可
- input{
- animation: resetBg .1s forwards;
- }
- @keyframes resetBg {
- to {
- color: #fff;
- background: transparent;
- }
- }
效果也是立竿见影~
https://codepen.io/xboxyan/pen/ZEYpdva
小结
上面两种方式均实现了同样的效果, 相比第一种方式, 第二种对现有代码的改动最小, 基本无副作用, 无需改变原有尺寸, 所以更推荐第二种方式, 当然第一种方式的思路还是值得推荐的, 可能在其他场景很更适合.
如果有其他实现思路, 欢迎在下方进行留言讨论, 谢谢~
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/web/html/16174.html