Google Chrome ऑटोफिल और उसकी पीले रंग की पृष्ठभूमि बनाता है

Question

मुझे Google Chrome और इसके फ़ॉर्म ऑटोफ़िल फ़ंक्शन के साथ डिज़ाइन की समस्या है। यदि Chrome को कुछ लॉगिन / पासवर्ड याद है, तो यह पृष्ठभूमि के रंग को पीले रंग में बदल देता है।

यहाँ कुछ स्क्रीनशॉट हैं:

उस पृष्ठभूमि को कैसे निकालें या इस ऑटोफिल को अक्षम करें?

Comments

मैं यह भी देखना चाहता हूं कि क्या इसका कोई जवाब है।

— काइल

स्टाइलिंग के लिए, यह रंग गंभीरता से डिज़ाइन तत्वों के साथ हो सकता है, जैसे क्रोम में इनपुट टैग में रूपरेखा भी, मैं इसे बंद करने की तुलना में रंग बदलना अधिक पसंद करूंगा।

— काइल

Google इस मुद्दे को कुछ हद तक स्वीकार करता है। कोड देखें।

— www.pp

स्वतः पूर्ण को अक्षम करने के लिए आप अपने इनपुट तत्व में स्वतः पूर्ण = "बंद" जोड़ सकते हैं , जैसे <इनपुट प्रकार = "पाठ" आईडी = "इनपुट" स्वतः पूर्ण = "बंद">

— joe_young

बस एक अतिरिक्त जानकारी: जब मैं पासवर्ड फ़ील्ड रखता हूं तो मुझे इससे काट दिया गया था। मैंने अपने खेतों को स्वचालित रूप से (पीले) हाइलाइट किया और अजीब मूल्य से भर दिया। और मुझे यहाँ समाधान मिला: zigpress.com/2014/11/22/stop-chrome-messing-forms ... समाधान उस अनुभाग में है जो कहता है "Google Chrome ऑटोफिल को अक्षम करें" ... छिपे हुए फ़ील्ड जोड़ें।

— कोकॉर्ड राका

Answer 1

किसी भी रंग को आप चाहते हैं "सफेद" बदलें।

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

Comments

महान विचार। मैं जब भी कमजोर उपकरणों पर संभावित प्रदर्शन से बचने के लिए पर्याप्त (नियमित आकार इनपुट बक्से) 50 या 100 के साथ छड़ी होगा। (और 0 के बाद px की कोई आवश्यकता नहीं)

— फ्रैंक नॉक

इस हैक प्यार! महान सोच ... हर कोई ऑटोफिल को हटा रहा है। मैं बस बदसूरत पीले की सवारी पाने के लिए ऑटोफिल रखना चाहता था।

— ट्रैविस

यदि आप अपने इनपुट क्षेत्र के पीछे की पृष्ठभूमि छवियां काम नहीं करते हैं तो पूरे क्षेत्र को सफेद रंग से भरें। मैंने इस पृष्ठ पर सभी समाधानों की कोशिश की, जिसमें jquery आधारित भी शामिल हैं और उन्होंने मेरे लिए काम नहीं किया, अंत में मुझे स्वत: पूर्ण = "बंद" फ़ील्ड में जोड़ना पड़ा।

— मायके ब्लैक

पाठ के रंग उपयोग की शैली के लिए भी -webkit-text-fill-color- इस प्रश्न को

— Erwin Wessels

वहाँ त्रुटि है, मैं शायद वाक्यविन्यास नहीं बदला है, लेकिन यह अब काम करता है:box-shadow: inset 0 0 0 1000px white !important;

— मुहम्मद उमर

Answer 2

यदि आप लोग पारदर्शी इनपुट क्षेत्र चाहते हैं तो आप संक्रमण और संक्रमण देरी का उपयोग कर सकते हैं।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Comments

मेरे लिए सबसे अच्छा समाधान RGBA रंग मूल्यों में काम नहीं किया -webkit-box-shadow। इस घोषणा के लिए रंग मान देने की आवश्यकता को भी समाप्त करता है: डिफ़ॉल्ट मान अभी भी लागू होंगे।

— सेबेस्टियन

अपनी अवधि के बजाय संक्रमण देरी का उपयोग करना बेहतर है, रंग मिश्रण बिल्कुल नहीं है

— antoine129

अच्छा है, लेकिन किसी कारण से मुझे इस नियम को फ़ाइल के अंत में स्थानांतरित करना पड़ा, अन्यथा काम नहीं किया

— इगोर मिज़क

कि मैंने क्या देखा! धन्यवाद!

— अख्मेडियनोव डेनियल

Answer 3

यहाँ समाधान :

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);
        });
    });
}

Comments

यह काम नहीं किया जबकि शीर्ष उत्तर नहीं दिया। हालाँकि मुझे लगता है कि मैं a के बाद से व्यवहार को बदलने की कोशिश नहीं करूँगा। यह जावास्क्रिप्ट है, इसलिए इसके बीच एक दूसरा काम करता है और यह (जब तक कि js लोड नहीं होता है) और b) नहीं होता है। यह क्रोम उपयोगकर्ता को भ्रमित कर सकता है जो डिफ़ॉल्ट व्यवहार के लिए उपयोग किया जाता है।

— TK123

मेरा क्रोम सिर्फ नए इनपुट के लिए पीले रंग को फिर से लागू करता है :(

— डस्टिन सिल्क

कृपया नहीं। यह किसी भी जेएस फ्रेमवर्क के साथ काम नहीं करेगा, केवल स्थैतिक वेबसाइटों के लिए।

— अख्मेडियनोव डैनिलियन

Answer 4

फ़ायरफ़ॉक्स में आप स्वत: पूर्ण = "बंद / पर" विशेषता का उपयोग करके सभी स्वतः पूर्ण को अक्षम कर सकते हैं। इसी तरह अलग-अलग वस्तुओं को स्वत: पूर्ण उसी विशेषता का उपयोग करके सेट किया जा सकता है।

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

क्रोम में आप इसे टेस्ट कर सकते हैं क्योंकि यह काम करना चाहिए।

Comments

autocomplete="off"इन दिनों टर्निंग सुलभ नहीं है।

— जोआओ

दुर्भाग्य से, यह समाधान अब क्रोम में काम नहीं करता है।

— मेंहदी लेखक

यह बहुत ही अव्यवस्थित है क्योंकि आप वास्तव में यहां वास्तविक समस्या को हल नहीं कर रहे हैं। इसके बजाय, आप उपयोगकर्ताओं को निराश करके एक नया निर्माण कर रहे हैं क्योंकि उन्हें मैन्युअल रूप से अपना (संभवत:) लॉगिन विवरण लिखना होगा (यदि वे भी याद रखें कि वे क्या थे)

— :)

Answer 5

यदि आप ऑटोफिल, साथ ही किसी भी डेटा, संलग्न हैंडलर और कार्यक्षमता को अपने इनपुट तत्वों से संरक्षित करना चाहते हैं, तो इस स्क्रिप्ट को आज़माएं:

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);
}

यह तब तक मतदान करता है जब तक यह किसी भी ऑटोफिल तत्वों को नहीं ढूंढता है, उन्हें डेटा और घटनाओं सहित क्लोन करता है, फिर उन्हें उसी स्थान पर डोम में सम्मिलित करता है और मूल को हटा देता है। एक बार क्लोनिंग करने के बाद किसी को भी यह पता लग जाता है कि ऑटोफिल से पेज लोड होने के बाद कभी-कभी यह दूसरी बार आता है। यह पिछले कोड नमूने का एक रूपांतर है, लेकिन अधिक मजबूत और यथासंभव कार्यक्षमता बरकरार रखता है।

(क्रोम, फ़ायरफ़ॉक्स और IE 8. में काम करने की पुष्टि)

Comments

यह एकमात्र समाधान था जिसे मैंने काम करते हुए पाया, बिना स्वत: पूर्ण अक्षम किए।

— ज़ेरॉक्सॉइड

शायद अंतराल सेट करना आवश्यक नहीं है क्योंकि window.load पर क्रोम ऑटोफिल्स हैं?

— टिमो हुओविनन

ऑटो को हटाने के बिना काम करता है, लाखों वोटों के साथ लोगों की तुलना में बेहतर समाधान।

— सहयोगी

अन्य समाधानों ने मेरे लिए काम नहीं किया, यहां तक ​​कि सबसे ज्यादा उत्थान किया, लेकिन यह एक ने किया। समस्या, जो @Timo के ऊपर कहा गया है, के विपरीत है, यह सही है कि Chrome window.load पर सही ढंग से ऑटोफ़िल नहीं करता है। भले ही यह काम किया है, इसके साथ एक समस्या यह है कि अगर कोई -webkit- ऑटोफिल तत्व नहीं हैं, तो लूप लगातार चलता है। यह काम करने के लिए आपको एक अंतराल की भी आवश्यकता नहीं है। बस शायद 50 मिलीसेकंड की देरी के साथ टाइमआउट सेट करें और यह ठीक काम करेगा।

— गैविन

Answer 6

निम्न सीएसएस पीले रंग की पृष्ठभूमि को हटा देता है और इसे आपके चयन की पृष्ठभूमि के रंग के साथ बदल देता है। यह स्वतः भरण अक्षम नहीं करता है और इसके लिए jQuery या जावास्क्रिप्ट हैक्स की आवश्यकता नहीं है।

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;
}

से कॉपी किया गया समाधान: ब्राउज़र फॉर्म-फिलिंग और HTML / CSS के साथ हाइलाइटिंग को ओवरराइड करें

Comments

यदि फ़ील्ड में कई छायाएं हैं, तो यह अच्छी तरह से नहीं खेलता है।

— मेरी काबिलियत

Answer 7

मेरे लिए काम किया, केवल सीएसएस परिवर्तन की आवश्यकता है।

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

आप के स्थान पर किसी भी रंग डाल सकते हैं #ffffff ।

Answer 8

थोड़ा सा हैकी लेकिन मेरे लिए पूरी तरह से काम करता है

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

Answer 9

मेरे लिए जवाबों के संयोजन ने काम किया

<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>

Comments

यह एकमात्र उदाहरण है जिसने मेरे लिए Chrome संस्करण 53.0.2785.116 m पर पाठ और पृष्ठभूमि दोनों के साथ काम किया

— pleshy

Answer 10

यहाँ जेसन का MooTools संस्करण है। सफारी में भी इसे ठीक करता है।

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);                                               


    }
});

Comments

इस स्क्रिप्ट का उपयोग न करें। यदि कोई स्वत: पूर्ण तत्व नहीं हैं, तो लूप लगातार 20 मिलीसेकंड पर चलेगा। एक अंतराल अनावश्यक है। लगभग 50 मिली सेकेंड में window.load के बाद एक टाइमआउट सेट करें और स्टाइल को हटाने के लिए बहुत समय होगा।

— गैविन

Answer 11

यह सफारी और क्रोम दोनों पर समस्या को ठीक करता है

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);
}

Comments

मेरे लिए क्या काम करता है लेकिन BUG अभी भी वहाँ है, और जैसा कि देखा जा सकता है, कोई तारीख तय नहीं की जा सकती। code.google.com/p/chromium/issues/detail?id=46543#c22

— एडुआर्डो एम

आप अपने अंतराल को कभी साफ न करें। यह मैला कोड है, इसका उपयोग न करें।

— गैविन

वास्तव में यह काम नहीं करता है। मैं इनपुट्स में कुछ भी टाइप नहीं कर सकता क्योंकि वे लगातार क्लोन हो रहे हैं। लगभग वहाँ ...

— डस्टिन सिल्क

इस var id = window.setInterval (फ़ंक्शन () {$ ('इनपुट: -webkit-autillill') को आज़माएं। प्रत्येक (फ़ंक्शन () {var क्लोन = $ (यह) .clone (सत्य, सत्य); $ (यह) .after (क्लोन) .remove ();});}, 20); $ ( 'इनपुट: -webkit-स्वत: भरण')। फोकस (function () {window.clearInterval (आईडी);});

— डस्टिन सिल्क

Answer 12

इससे मुझे मदद मिली, एक CSS केवल संस्करण।

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

जहां सफेद आप चाहते हैं किसी भी रंग हो सकता है

Answer 13

मैं इसका उपयोग करता हूं,

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 */

Answer 14

अपने टैग में, बस कोड की यह छोटी लाइन डालें।

autocomplete="off"

हालाँकि, इसे उपयोगकर्ता नाम / ईमेल / आईडीएनआई फ़ील्ड में न रखें क्योंकि यदि आप अभी भी स्वत: पूर्ण का उपयोग करना चाहते हैं, तो वह इसे इस फ़ील्ड के लिए अक्षम कर देगा। लेकिन मुझे इसके आस-पास एक रास्ता मिला, बस कोड को अपने पासवर्ड इनपुट टैग में रखें क्योंकि आप कभी भी पासवर्ड को स्वत: पूर्ण नहीं करते हैं। इस फिक्स को आपके ईमेल / उपयोगकर्ता नाम फ़ील्ड पर रंग बल, मेटिनिन स्वतः पूर्ण क्षमता को हटा देना चाहिए, और आपको Jquery या जावास्क्रिप्ट जैसी भारी हैक से बचने की अनुमति देता है।

Answer 15

यदि आप इसे पूरी तरह से निकालना चाहते हैं, तो मैंने पिछले उत्तरों में कोड को समायोजित कर लिया है ताकि यह हॉवर, सक्रिय और फोकस पर भी काम करे:

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

Comments

जोड़ना !importantआवश्यक है लेकिन धन्यवाद, इसकी मदद से मुझे बहुत कुछ मिला।

— पोलोचॉन

Answer 16

यहाँ एक म्यूटूल समाधान एलेसेंड्रो के समान है - प्रत्येक प्रभावित इनपुट को एक नए के साथ बदल देता है।

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);
    });
}

Answer 17

उस समाधान के बारे में क्या:

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सीएसएस क्लास दें।

Answer 18

मेरे लिए काम किए गए समाधानों में से कोई भी, उपयोगकर्ता नाम और पासवर्ड इनपुट अभी भी आबादी में नहीं थे और पीले रंग की पृष्ठभूमि को देखते हुए।

तो मैंने अपने आप से पूछा, "क्रोम यह कैसे निर्धारित करता है कि किसी दिए गए पृष्ठ पर स्वतः पूर्ण होना चाहिए?"

"क्या यह इनपुट आईडी, इनपुट नाम? फॉर्म आईडी? फॉर्म एक्शन के लिए दिखता है?"

उपयोगकर्ता नाम और पासवर्ड इनपुट के साथ मेरे प्रयोग के माध्यम से, मुझे केवल दो ही तरीके मिले जिससे कि क्रोम को उन क्षेत्रों को खोजने में सक्षम नहीं होना चाहिए जो स्वतःपूर्ण होने चाहिए:

1) पासवर्ड इनपुट को टेक्स्ट इनपुट के आगे रखें। 2) उन्हें एक ही नाम और आईडी दें ... या कोई नाम और आईडी नहीं।

पेज लोड होने के बाद, जावास्क्रिप्ट के साथ आप या तो पृष्ठ पर इनपुट के क्रम को बदल सकते हैं, या गतिशील रूप से उन्हें अपना डेटा और आईडी दे सकते हैं ...

और Chrome को यह नहीं पता है कि उसे क्या मारा गया ... स्वतः पूर्ण बंद रहता है।

पागल हैक, मुझे पता है। लेकिन यह मेरे लिए काम कर रहा है।

क्रोम 34.0.1847.116, OSX 10.7.5

Answer 19

मेरे लिए काम करने का एकमात्र तरीका था: (jQuery की आवश्यकता)

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

Answer 20

मैंने एक पासवर्ड फ़ील्ड के लिए इस मुद्दे को इस तरह तय किया है:

पासवर्ड के बजाय इनपुट प्रकार को टेक्स्ट पर सेट करें

JQuery के साथ इनपुट पाठ मान निकालें

JQuery के साथ इनपुट प्रकार को पासवर्ड में बदलें

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

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

Comments

क्रोम में काम नहीं करता है। जैसे ही फ़ील्ड = पासवर्ड बन जाता है, Chrome इसे

— मोगली

Answer 21

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);});

Answer 22

इस कोड को आज़माएं:

 	$(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">

Answer 23

fareed namrouti का उत्तर सही है। लेकिन इनपुट चुने जाने पर बैकग्राउंड फिर भी पीला हो जाता है । !importantसमस्या को जोड़ना । यदि आप भी चाहते हैं textareaऔर selectउसी व्यवहार के साथ जोड़ते हैंtextarea:-webkit-autofill, select:-webkit-autofill

केवल इनपुट

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

इनपुट, चयन, textarea

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

Answer 24

जोड़ा जा रहा है autocomplete="off" वाला इसे काटने वाला नहीं है।

करने के लिए इनपुट प्रकार विशेषता बदलें type="search"।
Google एक प्रकार की खोज के साथ इनपुट के लिए ऑटो-फिल लागू नहीं करता है।

आशा है कि यह आपको कुछ समय बचाता है।

Answer 25

यदि आप पीले रंग की झिलमिलाहट से बचना चाहते हैं, जब तक कि आपके सीएसएस को थप्पड़ नहीं लगाया जाता है, तो उस बुरे लड़के पर ऐसा संक्रमण करें:

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

Answer 26

अंतिम समाधान:

$(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);
    }
});

Answer 27

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

इसी तरह का प्रश्न: लिंक

Comments

क्रोम स्वत: पूर्ण = "बंद" की उपेक्षा करता है

— स्वेन वैन डेन बूगार्ट

गूगल क्रोम में अक्षम स्वत: पूर्ण: <a href=" browsers.about.com/od/googlechrome/ss/...>

— आदित्य पी भट्ट

Answer 28

बस उसी सवाल के साथ खुद को पाया। यह मेरे लिए काम करता है:

form :focus {
  outline: none;
}

Comments

जब आप उस पर क्लिक करते हैं तो बॉक्स पर रूपरेखा होती है, न कि ऑटोफिल्ड इनपुट का बैकग्राउंड कलर

— क्लेयर