一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了。为此百度了好久发现网上说的使用js来append操作,亲测了都不管用。除非把autocomplete=“off”关了,但这就不符合需求了
如图
网上说的改变-webkit-autofill的阴影背景是可以去除黄色背景的,但是图片依旧被覆盖了。
input:-webkit-autofill{
box-shadow:0 0 0px 1000px #fff inset;
}
试了很多次网上推荐的js来操作都不行后决定改变input的dom结构,即加多一个标签来访input的背景图片后解决了:
HTML:
<p>
<label for="text1">用户名:</label> <span id="tip1" class="icontip"></span> <input autocomplete="" type="text" id="text1" />
</p>
<p>
<label for="text2" style="letter-spacing:5.5px;">密码:</label><span id="tip2" class="icontip"></span> <input id="text2" type="password"/>
</p>
CSS:
input {width: 200px;height: 30px;}
#text1,#text2 {
padding: 2px 2px 2px 26px;
}
.btn{
text-align: center;
width: 120px;
height: 30px;
background-color: cornflowerblue;
border-radius: 3px;
color: #fff;
font-family: 'Microsoft YaHei';
font-size: 15px;
}
.icontip{
display: inline-block;height: 30px;width: 30px;position: absolute;
background: url('image/input.png') no-repeat;
}
#tip1{background-position: 4px -62px;}
#tip2{background-position: 4px -141px;}
/*-webkit-autofill用于覆盖chrome浏览器本身的背景颜色*/
input:-webkit-autofill{
box-shadow: 0 0 0px 1000px #fff inset;
}
最后成功解决
虽然解决了问题,但如果还有其他更好的方式解决的朋友希望一起探讨,如有不对的地方欢迎大家指正,谢谢。
一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案的更多相关文章
- 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。
哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...
- 取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...
- 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
- chrome浏览器下页面顶部出现一条空白解决
最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑 ...
- 解决chrome浏览器在win8下没有注册类的问题
解决chrome浏览器在win8下没有注册类的问题 新建一个txt,里面存放代码 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SO ...
- button 在chrome浏览器下被点击时会出现一个橙色的边框
问题描述: button在chrome浏览器下被点击时会出现一个橙色的边框 在button上添加 :focus{outline:none;}也无法解决. 解决办法: 在button上添加 :focus ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案
在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出 ...
- 最简单的解决Chrome浏览器主页被hao123、360和2345篡改的方法是什么
最简单的解决Chrome浏览器主页被hao123.360和2345篡改的方法是什么 一.总结 一句话总结:打开chrome的安装目录,将chrome.exe改成chrome1.exe即可,然后发送一个 ...
随机推荐
- win10我能ping通他人,但他人ping不同我
这是防火墙的原因,关闭防火墙即可
- ie上 CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。(包括图标无法显示)
转自:http://blog.csdn.net/shore_w/article/details/8976188 @font-face是CSS3中的一个模块, 它主要是把自己定义的Web字体嵌入到网页中 ...
- 《JAVA开发环境的熟悉》实验报告——20145337
- Linux 搭建svn服务器
一.安装svn服务器端yum install subversion 从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...
- sqlplus 初始化文件(每一次打开sqlplus不用重新设置 linesize 和 pagesize)
初始化文件目录 D:\oracle\product\11.2.0\dbhome_1\sqlplus\admin\glogin.sql 用记事本打开,添加 --SET linesize 150SET ...
- Nginx配置(日志服务器中关于日志的产生)
一:概括 1.需要配置的概括 定义日志格式 日志的分割字段:^A 日志格式:IP地址^A服务器时间^A请求参数 配置location,记录请求日志到本地磁盘 将数据按照给定的日志格式存储到本地磁盘 二 ...
- momentjs 求小时差异
momentjs 使用 var now1 = moment( moment().unix()*1000); //获取unix时间戳 需要*1000 var befor_time = moment(1 ...
- (copy) DBAN vs nwipe
source: https://sourceforge.net/p/dban/discussion/208932/thread/cb591b59/ Question:Trouble in runnin ...
- MetInfo数据库结构表
met_admin_table 表 Key 字段名称 数据类型 不为空 默认值 说明 PK id INT(11) Yes 编号 admin_type TEXT Yes 管理员类型 ad ...
- 一些常见maven仓库
<repositories> <repository> <id>spring-releases</id> <url>https://repo ...