Google Chrome表单自动填充及其黄色背景

时间：2010-05-27 10:30:59

标签： html css forms google-chrome autofill

我对Google Chrome及其表单自动填充功能存在设计问题。 如果Chrome记住某些登录名/密码，则会将背景颜色更改为黄色。

以下是一些截图：

alt text alt text

如何删除该背景或仅禁用此自动填充？

27 个答案:

答案 0 :(得分：277)

将“白色”更改为您想要的任何颜色。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

答案 1 :(得分：43)

解决方案here：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

答案 2 :(得分：26)

在Firefox中，您可以使用autocomplete =“off / on”属性禁用表单上的所有自动填充功能。同样，可以使用相同的属性设置单个项目自动完成。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

您可以在Chrome中进行测试，因为它应该可以正常运行。

答案 3 :(得分：25)

如果要保留自动填充，以及附加到输入元素的任何数据，附加处理程序和功能，请尝试以下脚本：

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
    var _interval = window.setInterval(function ()
    {
        var autofills = $('input:-webkit-autofill');
        if (autofills.length > 0)
        {
            window.clearInterval(_interval); // stop polling
            autofills.each(function()
            {
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }
    }, 20);
}

它会轮询直到找到任何自动填充元素，克隆它们包括数据和事件，然后将它们插入到同一位置的DOM中并删除原始元素。一旦找到要克隆的任何内容，它就会停止轮询，因为自动填充有时会在页面加载后花费一秒钟。这是以前代码示例的变体，但更加健壮，并尽可能保持尽可能多的功能。

（已确认在Chrome，Firefox和IE 8中工作。）

答案 4 :(得分：16)

以下CSS会删除黄色背景颜色，并将其替换为您选择的背景颜色。它不会禁用自动填充，也不需要jQuery或Javascript黑客。

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}

复制的解决方案： Override browser form-filling and input highlighting with HTML/CSS

答案 5 :(得分：6)

为我工作，只需要改变css。

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

你可以用任何颜色代替 #ffffff 。

答案 6 :(得分：3)

答案的组合对我有用

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>

答案 7 :(得分：3)

这解决了Safari和Chrome上的问题

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}

答案 8 :(得分：3)

有点hacky但对我来说很完美

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

答案 9 :(得分：2)

这是杰森的MooTools版本。也在Safari中修复它。

window.addEvent('domready',function() { 
    $('username').focus();

    if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
    {

        var _interval = window.setInterval(function ()
        {
            var autofills = $$('input:-webkit-autofill');
            if (autofills.length > 0)
            {

                window.clearInterval(_interval); // stop polling
                autofills.each(function(el)
                {
                    var clone = el.clone(true,true).inject(el,'after');;
                    el.dispose();
                });
            }
        }, 20);                                               


    }
});

答案 10 :(得分：2)

我用这个，

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */

答案 11 :(得分：2)

这帮助了我，一个仅限CSS的版本。

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

其中 white 可以是您想要的任何颜色。

答案 12 :(得分：1)

在您的代码中，只需插入一小段代码即可。 

autocomplete="off"

但是，请勿将其放在username / email / idname字段中，因为如果您仍在使用自动完成功能，则会为此字段禁用它。但我找到了解决此问题的方法，只需将代码放在密码输入标记中，因为您从不自动完成密码。此修复程序应删除您的电子邮件/用户名字段中的颜色力，matinain自动完成功能，并允许您避免像Jquery或javascript这样的大量黑客。

答案 13 :(得分：1)

如果你想完全摆脱它，我已经调整了之前答案中的代码，因此它可以悬停，激活和关注：

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

答案 14 :(得分：0)

如果要避免在应用CSS之前出现黄色闪烁，请像这样对这个坏男孩打一巴掌：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    transition: background-color 10s ease-in-out 0s;
}

答案 15 :(得分：0)

添加autocomplete="off"不会削减它。

将输入类型属性更改为type="search" Google不会对使用某种搜索类型的输入应用自动填充。

希望这可以节省你一些时间。

答案 16 :(得分：0)

fareed namrouti 回答是正确的。但是当选择输入时，背景仍会变黄。添加ItemTouchHelper可解决问题。如果您还希望private class RecoverAnimation implements AnimatorListenerCompat { final float mStartDx; final float mStartDy; final float mTargetX; final float mTargetY; final Canvas mCanvas; final RecyclerView mRecyclerView; final RecyclerView.ViewHolder mViewHolder; final int mActionState; private final ValueAnimatorCompat mValueAnimator; float mX; float mY; // if user starts touching a recovering view, we put it into interaction mode again, // instantly. boolean mOverridden = false; private boolean mEnded = false; private float mFraction; public RecoverAnimation(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, int actionState, float startDx, float startDy, float targetX, float targetY) { mRecyclerView = recyclerView; mCanvas = c; mActionState = actionState; mViewHolder = viewHolder; mStartDx = startDx; mStartDy = startDy; mTargetX = targetX; mTargetY = targetY; mValueAnimator = AnimatorCompatHelper.emptyValueAnimator(); mValueAnimator.addUpdateListener( new AnimatorUpdateListenerCompat() { @Override public void onAnimationUpdate(ValueAnimatorCompat animation) { setFraction(animation.getAnimatedFraction()); update(); } }); mValueAnimator.setTarget(viewHolder.itemView); mValueAnimator.addListener(this); setFraction(0f); } public void setDuration(long duration) { mValueAnimator.setDuration(duration); } public void start() { animatorRunning = true; mViewHolder.setIsRecyclable(false); mValueAnimator.start(); } public void cancel() { mValueAnimator.cancel(); } public void setFraction(float fraction) { mFraction = fraction; } /** * We run updates on onDraw method but use the fraction from animator callback. * This way, we can sync translate x/y values w/ the animators to avoid one-off frames. */ public void update() { if (mStartDx == mTargetX) { mX = ViewCompat.getTranslationX(mViewHolder.itemView); } else { mX = mStartDx + mFraction * (mTargetX - mStartDx); } if (mStartDy == mTargetY) { mY = ViewCompat.getTranslationY(mViewHolder.itemView); } else { mY = mStartDy + mFraction * (mTargetY - mStartDy); } getDefaultUIUtil().onDraw(mCanvas, mRecyclerView, mViewHolder.itemView, mX, mY, mActionState, false); } @Override public void onAnimationStart(ValueAnimatorCompat animation) { } @Override public void onAnimationEnd(ValueAnimatorCompat animation) { animatorRunning = false; mEnded = true; getDefaultUIUtil().onDraw(mCanvas, mRecyclerView, mViewHolder.itemView, 0, 0, ItemTouchHelper.ACTION_STATE_IDLE, false); getDefaultUIUtil().clearView(mViewHolder.itemView); } @Override public void onAnimationCancel(ValueAnimatorCompat animation) { setFraction(1f); //make sure we recover the view's state. } @Override public void onAnimationRepeat(ValueAnimatorCompat animation) { } } 和!important具有相同的行为，请添加textarea

仅输入 

select

输入，选择，textarea 

textarea:-webkit-autofill, select:-webkit-autofill

答案 17 :(得分：0)

试试这段代码：

 	$(function(){
   		setTimeout(function(){
   			$('[name=user_password]').attr('type', 'password');
   		}, 1000);
   	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">

答案 18 :(得分：0)

Arjans解决方案的更新。当试图改变价值时，它不会让你。这对我来说很好。当您专注于输入时，它将变为黄色。它足够接近。

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

答案 19 :(得分：0)

我修正了这个问题的密码字段我喜欢这个：

将输入类型设置为文本而不是密码

使用jQuery删除输入文本值

使用jQuery将输入类型转换为密码

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

答案 20 :(得分：0)

对我有用的唯一方法是:(需要jQuery）

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

答案 21 :(得分：0)

这些解决方案都不适用于我，用户名和密码输入仍在填充并且为黄色背景。

所以我问自己，＆＃34; Chrome如何确定在给定页面上自动填充的内容？＆＃34;

＆＃34;它是否寻找输入ID，输入名称？表格ID？表格行动？＆＃34;

通过我对用户名和密码输入的实验，我发现只有两种方法会导致Chrome无法找到应自动填充的字段：

1）将密码输入放在文本输入之前。 2）给他们相同的名字和身份......或者没有名字和身份。

页面加载后，使用javascript，您可以更改页面上输入的顺序，也可以动态地为它们指定名称和ID ...

Chrome并不知道是什么打中了它...自动完成功能保持关闭状态。

疯狂的黑客，我知道。但是它为我工作。

Chrome 34.0.1847.116，OSX 10.7.5

答案 22 :(得分：0)

该解决方案如何：

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

关闭自动完成和自动填充（黄色背景消失），等待100毫秒，然后自动完成功能，无需自动填充。

如果您有需要自动填充的输入，请给它们auto-complete-on css类。

答案 23 :(得分：0)

这是一个与Alessandro相同的Mootools解决方案 - 用新的替换每个受影响的输入。

if (Browser.chrome) {
    $$('input:-webkit-autofill').each(function(item) {
        var text = item.value;
        var name = item.get('name');
        var newEl = new Element('input');
        newEl.set('name', name);
        newEl.value = text;
        newEl.replaces(item);
    });
}

答案 24 :(得分：-1)

最终解决方案：

$(document).ready(function(){
    var contadorInterval = 0;
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
    {
        var _interval = window.setInterval(function ()
        {
            var autofills = $('input:-webkit-autofill');
            if (autofills.length > 0)
            {
                window.clearInterval(_interval); // stop polling
                autofills.each(function()
                {
                    var clone = $(this).clone(true, true);
                    $(this).after(clone).remove();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

答案 25 :(得分：-2)

<input type="text" name="foo" autocomplete="off" />

类似问题：Link

答案 26 :(得分：-5)

刚刚发现自己有同样的问题。这对我有用：

form :focus {
  outline: none;
}
相关问题
最新问题