如何更好的去除谷歌浏览器中input自动填充背景?

input可能是平时网页中使用最多的标签之一了,但凡需要输入的地方都少不了。
毕竟输入是一件比较麻烦的事情,所以浏览器也做出了许多便于输入的地方,比方说自动填充

input1

一般情况下,在表单提交的时候浏览器会自动记录提交的内容

这个功能本来是很好的,不过当自动填充后,输入框背景会自动变成淡紫色(以前是x黄色,仅限谷歌浏览器),设计师(但凡有点审美的前端)看到了肯定就不干了,毕竟还是挺违和的,那么何如去除这个默认的背景呢?

背景是如何产生的

按照以往的经验,如果要修改标签默认的样式,首先肯定是查看标签的默认样式,如下

image

比较好理解,当自动填充时会激活:-internal-autofill-selected伪类,然后就变成了淡紫色。

如果我们设置样式覆盖

input:-internal-autofill-selected{
    background: red!important;
}

虽然样式覆盖了,然而并没有什么用,仍然是默认的淡紫色(要是起作用的话就不会专门去研究这个了),原因不明...

现有的解决方式

网上普遍的解决方式主要有两种:

1. 使用内阴影进行覆盖

既然背景改变不了,那么就找个东西覆盖呗

input{
    box-shadow: 0 0 0px 1000px white inset;
}

image

大部分情况使用这种方式即可解决问题

2. 关闭自动填充功能

既然是由于自动填充导致的问题,关掉就行了呀

<input  autocomplete="off">

image

有些对信息比较敏感的情况下(不想自动填充)可以使用这个功能

现有解决方式的局限

首先说第二种方式,虽然这种方式比较简单,但是却失去了自动填充功能,这对于用户体验是很不友好的(手动输入是一件费时费力的事情),如果说要自定义这个功能,那可能还需要不少的js脚本(还需考虑键盘访问),而且可能还会有意料之外的bug,所以一般情况下不建议去除默认功能。

那么第一种方式呢?如果输入框是纯色的背景,那么给一个和背景一样的阴影颜色就好了,如果而我们设计需要的是一种透明的输入框,那基本就凉掉了。

image

比如类似这样的效果,如果被填充了还是相当难看的

image

更好的解决方式

下面给出两种解决方式

方式一:利用background-clip: content-box

既然背景改变不了,那么就把它裁掉呗。

背景颜色默认是渲染到padding-box的,我们可以设置background-clip: content-box只渲染到content-box,这样背景就看不到了(当然还需指定一下高度为0。)~

input{
  height: 0;
  padding: 1.2em .5em;
  background-clip: content-box;
}

image

可以看到,自动填充时的背景已经消失了,不过还有一个小问题,填充的文字颜色也是无法直接修改的(默认为rgb(0,0,0)),原因相同,这里我们可以借助一下::first-line伪类

input::first-line{
  color: #fff
}

image

应该算比较完美了~

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>

image

可以看到背景很轻易的就被改成了蓝色。

利用这个特性,上面的问题就很容易了,只需设置一个动画即可

input{
  animation: resetBg .1s forwards;
}
@keyframes resetBg {
  to {
    color: #fff;
    background: transparent;
  }
}

image

效果也是立竿见影~

https://codepen.io/xboxyan/pen/ZEYpdva

小结

上面两种方式均实现了同样的效果,相比第一种方式,第二种对现有代码的改动最小,基本无副作用,无需改变原有尺寸,所以更推荐第二种方式,当然第一种方式的思路还是值得推荐的,可能在其他场景很更适合。

如果有其他实现思路,欢迎在下方进行留言讨论,谢谢~


前端侦探
致力于有趣的前端探索~
14.6k 声望
13.7k 粉丝
0 条评论
推荐阅读
原生popover终于来了!
欢迎关注我的公众号:前端侦探提到 popover,相信大家都很熟悉,没错,就是组件库里经常见到的悬浮层(或者叫“气泡卡片”),比如 Ant Design现在,这个好用的特性终于在Chrome 114上正式支持了~下面花几分钟快速...

XboxYan5阅读 453

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
14.6k 声望
13.7k 粉丝
宣传栏