5

重複の可能性：
GoogleChromeフォームの自動入力とその黄色の背景

要素からweb-kit黄色で本当に悪いものを取り除くことは可能ですか？backgroundinput

画像を見るここに画像の説明を入力してください

シンプルで試してみましbackground:#fff;たが、うまくいきません。

これは機能しません：

input[type="text"],input[type="password"],textarea{
    border:1px solid #ccc;
    min-height:30px;
    padding:1%;
    background: #fff !important;
  }

Chromeを搭載したMacOSXを使用しています

http://jsfiddle.net/J6Y9s/2/

私が見つけた唯一の解決策は、jQueryで動作するこのコードですが、入力から快適なオートコンプリートを削除したくありません：

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
}
4

4 に答える 4

2

私は以下を試しましたが、それで私の問題は解決しました（黄色を削除）ので、これがあなたにも役立つことを願っています

私はcssを試しました

input:-webkit-autofill {
    color: #f5f5f5!important;
}

私もjqueryを試しましたが、両方とも機能していました 

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);
        });
    });
}
于 2012-10-12T07:38:04.893 に答える
2

聖なる牛！これは最終的に機能するようです。新しい DOM 要素が追加される前に、まだ黄色の閃光があるという 1 つの警告があります。これは完全に避けられないようです。実装は最初に投稿されたようには機能しませんでしたが、最初の概念を持っていた NullPointer に感謝します。

http://jsfiddle.net/a6Pqy/

HTML:

<form method="post" id="frm">
    First name:<input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    E-mail: <input type="text" name="email" /><br />
    Phone: <input type="text" name="phone" /><br />
    Address: <input type="text" name="address" /><br />
</form>​

JS:

//This is one hackish piece of code. Please encourage the Chromium group to FIX THIS BUG http://code.google.com/p/chromium/issues/detail?id=46543

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

    //must clear the contents of the element on focus or the Chrome autocomplete monstrosity doesn't respond to the 'input'event since it may already have pre-populated content from before.
    $(document).on('focus', '#frm > input', function(){
       $(this).val(''); 
    });

    //listen for the input event, meaning autocomplete may have occurred
    $(document).on('input', '#frm > input', function(){

         //setTimeout is critical because it delays the rendering engine by a frame so that the following selector grabs all valid -webkit-autofill inputs            
        setTimeout(function(){
            $('input:-webkit-autofill').each(function(){

                var val = $(this).val(),
                    attributes = $(this)[0].attributes,
                    el = $('<input>');

                //we make an entirely new element and copy all of the old attributes to it. jQuery doesn't offer a native way to do this.
                for(var i=0; i<attributes.length; i++){
                     el[0].setAttribute( attributes[i].nodeName, attributes[i].nodeValue );
                }
                //set the autocompleted value to the new element
                el.val( val );

                //insert the new element then remove the old one.
                $(this).after(el).remove();

            });

        },0);

    });

}
于 2012-10-12T10:27:10.673 に答える
-1

このフィールドのオートコンプリートをオフにする必要があります。

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

オートコンプリートを使用し、入力に常にカスタムの背景色を使用する場合は、残念ながら不可能です。Chromiumトラッカーhttp://code.google.com/p/chromium/issues/detail?id=46543にある問題です。

于 2012-10-12T07:42:36.173 に答える
-1

それは可能だと思います。色の宣言の後に置くこともできますが!important、残念ながら、テストできる web-kit ブラウザーがありません。

于 2012-10-12T07:38:27.687 に答える