一个解决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;
        }

最后成功解决

虽然解决了问题,但如果还有其他更好的方式解决的朋友希望一起探讨,如有不对的地方欢迎大家指正,谢谢。

时间: 2024-10-24 10:05:58

一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案的相关文章

取消chrome浏览器下input和textarea的默认样式

最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式. 看代码: 取消chrome下input和textarea的聚焦边框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大: textarea{resize:none} 最

chrome浏览器下页面顶部出现一条空白解决

最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑器中不显示,但是会产生输出,就像多了一个空行. 一般的编码集中并不会出现bom头,unicode编码集中会出现. 类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事

取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“&#215;”按钮去除办法

取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: input::-ms-clear { display: none; }

chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案

在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出什么问题.但是Chrome用的好好的,突然过了一个月,就无法实现复制到剪切板了.一时不知道什么原因.网上查了一下,有这样一原因:安全问题,浏览器默认禁止访问剪贴板. 从代码层面,想了各种方法,去解决兼容性,都无济于事,就是解决不了Chrome的兼容性. 贴一下JavaScript一款通用的复制粘贴方

IE浏览器下a标签嵌套img标签默认带有边框

最近写在线主页时发现IE浏览器下a标签嵌套img标签默认带有边框: 解决办法:img{border:0 none;} 注意,严格意义上0和none都要加上!

&lt;select&gt;在chrome浏览器下背景透明问题

在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个select元素(背景透明).在线查看(可在不同浏览器中查看效果) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt

解决chrome浏览器无法自动调用阿里旺旺客户端聊天软件

解决chrome浏览器无法自动调用阿里旺旺客户端聊天软件 复制粘贴以下代码,可以直达设置页面 chrome://settings/contentExceptions#plugins === 打开chrome浏览器---设置---显示高级设置---隐私管理[内容管理]---下拉找到"插件"[管理列外情况...]---添加[*.]alipay.com 允许---完成---重启chrome浏览器

解决chrome浏览器无法得到window.showModalDialog返回值的问题

父页面处理: function ProductList() {   var TypeID = window.document.getElementById("Type").value;   var returnvalues = window.showModalDialog('ProductList.aspx?Type=' + TypeID,'window','dialogWidth=700px;dialogHeight=680px');    if(returnvalues!=unde

【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效. 那么怎么解决呢?解决方式如下: 在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为