• 【Web】解决Chome内核浏览器中input自动填值背景为黄色-最终方案


    场景:比如谷歌浏览器、QQ浏览器 均为Chome内核,input自动填充时背景为黄色,火狐、IE等浏览器并无此问题

    解决方法1:仅仅针对纯色背景可行,原理:使用阴影将背景掩盖

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1px #0096e6 inset;
        border: 1px solid #CCC !important;
    }

    备注:0 0 0 1px #0096e6 inset;

    将1px改为大于等于你的文本框即可,通常>20px已经基本够用

    将#0096e6改为你的背景色。

    所谓的把背景设置为透明 transparent 是没有任何效果的,此处的透明是阴影的透明,最终还是黄色背景。

    解决方法2:针对有背景图片的、可以强制关闭input的autocomplete属性

    <input id="loginName" autocomplete="off" name="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="账号">

    并不希望关闭其他内核浏览器的自动填充效果、可以这么做

    $(function() {
            if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
                $(window).load(function() {
                    $('input:not(input[type=submit])').each(function() {
                        $(this).attr("autocomplete","off");//autocomplete="off"
                    });
                });
            }
        });

    这样、就能很好的解决这个问题,最希望的效果是能让这个背景透明,继续探索吧。

  • 相关阅读:
    配置数据同步
    NET移动设备开发
    计算两个日期之间的工作日数
    ActionScript3.0程序开发工具
    常用JS积累之获取节点高度(基于浏览器)
    推荐40个优秀的免费CSS工具
    #include语法
    CSS3属性boxshadow使用教程
    CSS元素背景透明
    js获取网页高度
  • 原文地址:https://www.cnblogs.com/flydkPocketMagic/p/7244560.html
Copyright © 2020-2023  润新知