chrome html代码提示框,如何去掉chrome浏览器自动完成输入框背景黄色
chrome浏览器或其它webkit内核浏览器自动完成输入框的输入后,输入框会有淡黄色背景。就像这样:
我们一般不想要这个样式。
如果只是想去掉这个黄色背景,我们可以用足够大的内阴影来遮盖这个黄色背景。
可以在style中添加一个webkit私有的选择器input:-webkit-autofill并加下以下代码:-webkit-box-shadow: 0 0 0 1000px white inset;完成示例如下:html>
eg.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
效果如下:
但是有更丰富的自义定样式,就不好处理了,比如想要输入框的字为白色,背景为黑色。我们直接设置字体颜色color:#fff对于autofill是没有效果的,
更悲哀的是用黑色的box-shadow来遮盖输入框背景时,圆角的输入框会出现“漏白光”,并不能完全遮住。如下
通过查阅资料与不断尝试,最终有了比较完美的解决方案,代码如下:html>
eg.
body{
background: #000;
}
input{
color: #fff;
border-width: 0;
padding: 12px 20px;
border-radius: 4px;
background-color: #333;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px #333 inset;/*内阴影遮盖背景*/
-webkit-background-clip: text;/*防圆角漏光*/
text-shadow: 0 0 0px #fff, 0 0 0px #fff;/*设置一个白色文字阴影*/
-webkit-text-fill-color: transparent;/*设置文字填充为透明,将文字阴影完全透出*/
}
效果如下:
——在项目中遇到的这个问题,这个是浏览器的特性,用来告知用户输入框内容是由浏览器自动完成的,个人感觉不应该强制的修改样式,但UIer觉得这样很不美观,所以只能尝试修改。还好最终找到了完美的解决方案。记录备忘!
chrome html代码提示框,如何去掉chrome浏览器自动完成输入框背景黄色相关推荐
- IntelliJ IDEA 无法自动显示代码提示框
IntelliJ IDEA 无法自动显示代码提示框 https://blog.csdn.net/gaoqiao1988/article/details/73299670 2016年08月11日 20: ...
- 自定义Dialog提示框高仿QQ浏览器版本更新提示框
前言: 今天是5月7号,真的好久没有写博客了,时光匆匆,我总感觉自己忙忙碌碌似的,静想片刻确实是挺忙的,但是在繁忙当中却缺少了总结归纳,相信大家都知道总结归纳的重要性了,今天我要和大家分享我的自定义D ...
- 去掉chorme浏览器自动补全时input框的背景样式
去掉chorme浏览器自动补全时input框的背景样式 通过延迟背景出来的时间来解决该问题 input:-webkit-autofill {-webkit-transition-delay: 9999 ...
- 在提示框中:双击浏览器缩放,浓咖啡小睡和Android引导屏幕
Every week we crack open the tips box and share some of the best reader tips. This week we're lookin ...
- chrome 取消常用缩略图_怎么去掉 Chrome 新标签页的缩略图?
3月7 谷歌更新浏览器 版本 65.0.3325.146(正式版本) (64 位) 修改效果为无百度版本要是不想要百度和书签吧body 标签的内容都删掉 想手动改看完这篇文章,不想动手的直接下载吧 使 ...
- jetbrains IDEA/pycharm修改代码提示框配色
修改位置 Editor -> Color Scheme -> General -> Popups and Hint 修改后的效果
- IDEA代码提示框的背景颜色修改
setting – Editor – Color Scheme – General
- 微信小程序的提示框 showToast 去掉勾,设置icon为null没有效果
设置icon为null这个功能是在1.9之后的版本才支持的,所以需要修改版本号,project.config.json这里文件里面,在根目录下 ,亲们,有用就给个赞吧,谢谢
- vscode下载和前端工程师常用的20+插件,包含代码提示、语法高亮、括号颜色等等
这里附带vscode下载地址,和前端开发常用的20+插件,可根据插件功能自行选择下载. VsCode下载安装 Visual Studio Code下载地址:https://code.visualstu ...
最新文章
- 干货 | 目标检测技巧大汇总(含代码与解读)
- php广告轮播效果,使用swiper组件实现轮播广告效果
- 刘伟:什么是智能人机交互?
- php 定义数组使用逗号,
- synchronized的底层原理
- 28-高级特性之作用域(2)
- Java 中的5个代码性能提升技巧,最高提升近10倍
- Atitit. Atiposter 发帖机 新特性 poster new feature v7 q39
- 功率放大器的性能指标
- idea、Pycharm提高效率常用配置
- 2018计算机中文期刊影响因子排名,2018期刊影响因子排名(1)
- 【TDA2x学习】TDA2HG 知识点总结
- ERWIN中的一对多标识关系和一对多非标识关系
- stm32-DHT11原理及代码解读
- 经典!沐风老师3DMAX建模实例系列教程上线啦。。。
- 平方度用计算机打出来,角度计算器-角度计算器
- 公钥和私钥的完全解释(包括对称算法和非对称算法、RSA解释)
- EditPlus中文版+英文版+注册码下载
- 前端图片处理 - Photoshop压缩照片 / collagelt轻松拼接照片墙
- 光纤仿真相关参数——光纤损耗、数值孔径、归一化参数