zoukankan      html  css  js  c++  java
  • 【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"
                    });
                });
            }
        });

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

  • 相关阅读:
    DynamoDB-条件表达式ConditionExpression
    更新表达式updateExpression
    AWS AppSync 的基本语句
    post和get的区别
    图片缩小右移旋转
    加入购物车飞入特效
    c# out参数直接写法
    unity vs 重复打开
    canvas与sprite射线检测
    MySQL语法大全
  • 原文地址:https://www.cnblogs.com/flydkPocketMagic/p/7244560.html
Copyright © 2011-2022 走看看