如何隐藏 Safari 中 input 标签的 autofill 图标
2018-01-20 00:27
323 查看
Safari 浏览器会为 <input type="passport"> 标签自动添加一个小锁的图标(如下图),本意上是让用户可以从这里选择相应的 用户名/密码 进行自动填充,但是在某些场景下需要将其隐藏,可能是出于安全性考虑,当然也有可能出于 UI 样式方面考虑。
从网上可以搜到很多种有效的解决方法,例如下面的代码就是其中之一,但是很少会告诉你为什么要这样做,以致于下次再遇到这样类似的问题时,还是要借助于 Google、Baidu。
在了解为什么要这样做之前,我们需要稍微了解下什么是 Shadow DOM,简单点来说:
Shadow DOM 允许在 document 渲染时插入一个 DOM 元素子树,但是这课子树并不在主 DOM 树中。开发者可以利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
在介绍 Shadow DOM 的所有例子中,最经典的就是 <video> 标签。在HTML中,我们只使用了一个 <video> 标签,但是在页面上却呈现了很多元素,例如,下载按钮、全屏按钮呀等等。这个就是 Shadow DOM 的功劳了,它在 document 渲染 <video> 元素时,在该元素的子树中插入了 <button>、<span> 等标签用来显示 下载、全屏 等一系列的元素。该原理同样适用于 <input type="passowrd"> 标签,虽然它的子树中的元素相对于 <video> 来说少的可怜。
我们可以通过下述方法在 Safari 中打开显示 Shadow DOM 的开关。
在显示 Shadow DOM 后,我们可以清楚的看到 <input type="passport"> 中的小锁是由 <div pseudo="-webkit-credentials-auto-fill-button"></div> 渲染的。
所以我们的问题就简化为如何通过 CSS 隐藏相应的 <div> 。说到这里,相信大家也都明白文章开头的 CSS 的作用以及为什么要这样做了吧。
从网上可以搜到很多种有效的解决方法,例如下面的代码就是其中之一,但是很少会告诉你为什么要这样做,以致于下次再遇到这样类似的问题时,还是要借助于 Google、Baidu。
input::-webkit-credentials-auto-fill-button { display: none !important; visibility: hidden; pointer-events: none; position: absolute; /* 避免占用 input 元素额外的 padding,正常情况下存在 display: none!; 就可以了 */ right: 0; }
在了解为什么要这样做之前,我们需要稍微了解下什么是 Shadow DOM,简单点来说:
Shadow DOM 允许在 document 渲染时插入一个 DOM 元素子树,但是这课子树并不在主 DOM 树中。开发者可以利用 Shadow DOM 封装自己的 HTML 标签、CSS 样式和 JavaScript 代码。
在介绍 Shadow DOM 的所有例子中,最经典的就是 <video> 标签。在HTML中,我们只使用了一个 <video> 标签,但是在页面上却呈现了很多元素,例如,下载按钮、全屏按钮呀等等。这个就是 Shadow DOM 的功劳了,它在 document 渲染 <video> 元素时,在该元素的子树中插入了 <button>、<span> 等标签用来显示 下载、全屏 等一系列的元素。该原理同样适用于 <input type="passowrd"> 标签,虽然它的子树中的元素相对于 <video> 来说少的可怜。
我们可以通过下述方法在 Safari 中打开显示 Shadow DOM 的开关。
在显示 Shadow DOM 后,我们可以清楚的看到 <input type="passport"> 中的小锁是由 <div pseudo="-webkit-credentials-auto-fill-button"></div> 渲染的。
所以我们的问题就简化为如何通过 CSS 隐藏相应的 <div> 。说到这里,相信大家也都明白文章开头的 CSS 的作用以及为什么要这样做了吧。
相关文章推荐
- 如何隐藏input标签的样式
- 如何使用CSS设置<input>标签的背景小图标 简单
- Flex:如何实现利用Flex隐藏任务栏图标
- Windows7系统设置任务栏图标是否合并或者隐藏标签(图文教程)
- bootstrap中如何使input中的小图标获得点击事件
- Windows Mobile X图标如何销毁窗体而非隐藏
- 调试压缩后的Javascript文件:在 Chrome 和 Safari ,选择“脚本”标签,找到相应的文件,然后点击“{}”图标(pretty print,在面板底部)
- Android应用如何隐藏APP桌面图标
- android反编译 学习如何隐藏应用图标
- Android 如何隐藏应用程序的图标
- ActivityChooserView-如何隐藏选择的应用图标
- IOS中如何在多层界面之间显示与隐藏标签栏(UITabBar)
- 如何修改复选框的样式(其他input标签类推)
- input 标签如何multiple 上传多张图片 实时在页面显示图片
- MAC 如何隐藏dock栏上你不想看见的图标
- 安卓如何隐藏APP图标探讨
- win10隐藏图标后找不到怎么办?win10隐藏图标后如何找出来
- input标签禁止输入隐藏光标
- safari 调用隐藏fileInput
- 如何隐藏input边框,使其不显示