Chrome स्वतः पूर्ण के लिए इनपुट पृष्ठभूमि रंग हटाना?

Question

मैं जिस फॉर्म पर काम कर रहा हूं, उस पर Chrome ईमेल और पासवर्ड फ़ील्ड को ऑटो-फिल कर रहा है। यह ठीक है, हालांकि, क्रोम पृष्ठभूमि के रंग को हल्के पीले रंग में बदल देता है।

मैं जिस डिजाइन पर काम कर रहा हूं, वह एक गहरे रंग की पृष्ठभूमि पर हल्के पाठ का उपयोग कर रहा है, इसलिए यह वास्तव में रूप को गड़बड़ कर देता है - मेरे पास पीले बक्से और निकट-अदृश्य सफेद पाठ है। एक बार क्षेत्र केंद्रित होने के बाद, खेत सामान्य पर लौट आते हैं।

क्या क्रोम को इन क्षेत्रों का रंग बदलना रोकना संभव है?

Comments

यहां आपके पास व्यापक जानकारी है: stackoverflow.com/questions/2338102/…

— दास

इसी तरह की पोस्ट के लिए मेरा जवाब देखें: stackoverflow.com/a/13691346/336235

— अर्नस्ट कर्ल्सन्स

Answer 1

यह ठीक काम करता है, आप इनपुट बॉक्स शैलियों के साथ-साथ इनपुट बॉक्स के अंदर पाठ शैलियों को बदल सकते हैं:

यहाँ आप जैसे किसी भी रंग का उपयोग कर सकते white, #DDD, rgba(102, 163, 177, 0.45)।

लेकिन transparentयहाँ काम नहीं करेगा।

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

इसके अतिरिक्त, आप इसका उपयोग टेक्स्ट का रंग बदलने के लिए कर सकते हैं:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

सलाह: सैकड़ों या हजारों में बहुत अधिक धुंधला त्रिज्या का उपयोग न करें। इसका कोई लाभ नहीं है और यह कमजोर मोबाइल उपकरणों पर प्रोसेसर लोड डाल सकता है। (वास्तविक, बाहरी छाया के लिए भी सही)। 20px ऊंचाई के एक सामान्य इनपुट बॉक्स के लिए, 30px 'धब्बा त्रिज्या' इसे पूरी तरह से कवर करेगा।

Comments

Chrome में अब उपयोगकर्ता एजेंट स्टाइलशीट दिखाता है :-internal-autofill-previewedऔर :-internal-autofill-selectedइसके बजाय pseudoclasses -webkit-autofill... रहस्यमय तरीके से, फिर -webkit-autofillभी काम करता है। मुझे व्यक्तिगत रूप से इसकी आवश्यकता नहीं थी !important।

— एंडी

मुझे हॉवर / फ़ोकस / सक्रिय छद्म चयनकर्ताओं की आवश्यकता नहीं थी

— antoine129

Answer 2

एक बॉक्स-छाया को जोड़ने के पिछले समाधान उन लोगों के लिए अच्छी तरह से काम करते हैं जिन्हें ठोस रंग की पृष्ठभूमि की आवश्यकता होती है। एक संक्रमण कार्यों को जोड़ने का दूसरा समाधान, लेकिन एक अवधि / विलंब निर्धारित करने का मतलब होगा कि किसी बिंदु पर यह फिर से दिखाई दे सकता है।

मेरा समाधान इसके बजाय कीफ़्रेम का उपयोग करना है, इस तरह यह हमेशा आपके चयन के रंग दिखाएगा।

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

उदाहरण कोडपेन: https://codepen.io/-Steve-/pen/dwgxPB

Comments

आकर्षण की तरह काम करता है।

— लालनुत्लुंगा छकछुक

यह निश्चित रूप से काम करता है! (क्रोम 79)

— लशाए

मुझे यह स्वीकार किए गए उत्तर से बेहतर लगता है ... बॉक्स-शैडो विधि चतुर है और काम करती है, लेकिन जब कोई उपयोगकर्ता ऑटोफ़िल के लिए एक मूल्य का चयन कर रहा है, तो डिफ़ॉल्ट रंग इनपुट क्षेत्र में संक्षिप्त रूप से फ्लैश करेगा, जो परेशानी हो सकती है अगर आपके इनपुट में डार्क बैकग्राउंड है। इस समाधान में ऐसे कोई मुद्दे नहीं हैं। चीयर्स!

— स्किवड्रेथ

उत्तम! मैंने उम्मीद की थी कि अभी तक बेहतर काम किया है!

— sdlins

यह Vuetify 2 के लिए विशेष रूप से काम करता है यदि आप सेट करते हैंcolor: inherit

— मार्क

Answer 3

मेरे पास एक बेहतर उपाय है।

नीचे किसी अन्य रंग की पृष्ठभूमि सेट करने से मेरे लिए समस्या हल नहीं हुई क्योंकि मुझे पारदर्शी इनपुट फ़ील्ड की आवश्यकता थी

-webkit-box-shadow: 0 0 0px 1000px white inset;

इसलिए मैंने कुछ अन्य चीजों की कोशिश की और मैं इसके साथ आया:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

Comments

बहुत बढ़िया, मुझे पारदर्शी पृष्ठभूमि भी चाहिए। पुनश्च: -webkit-text-fill-color: yellow !important;पाठ रंग के लिए मत भूलना ।

— gfpacheco

यह तब भी ऑटोफिल पृष्ठभूमि को दिखाएगा जब इनपुट छिपा हुआ है / साथ दिखाया गया है display। फिडेल - इसे बाहर की जाँच करें

— मार्टिन

इसके बजाय स्थापित करने की transition-durationहास्यास्पद उच्च, यह बेहतर हो स्थापित करने के लिए होगा transition-delayबजाय। इस तरह आप रंगों में किसी भी बदलाव की संभावना को और भी कम कर सकते हैं।

— झबरा

transitionहैक केवल ब्राउज़र द्वारा दर्ज एक डिफ़ॉल्ट प्रवेश के साथ करता है, तो इनपुट नहीं ऑटो भर जाता है काम करेंगे, नहीं तो पीले रंग की पृष्ठभूमि अभी भी वहाँ हो जाएगा।

— ग्वारी

शानदार समाधान .... लेकिन यह काम क्यों करता है? और सेटिंग background-colorकाम क्यों नहीं करती है? क्रोम को इसे ठीक करने की जरूरत है !!

— तेतरादेव

Answer 4

यह मेरा समाधान है, मैंने संक्रमण और संक्रमण देरी का इस्तेमाल किया है इसलिए मेरे इनपुट फ़ील्ड पर पारदर्शी पृष्ठभूमि हो सकती है।

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

Comments

मैंने इनपुट फ़ील्ड की पृष्ठभूमि के रूप में एक छवि निर्धारित की है, यह समाधान पीले रंग की छाया को हटा देता है, लेकिन पृष्ठभूमि छवि अभी भी छिपी हुई है

— मैटेओ त्सारीरी

अब तक का सबसे अच्छा समाधान, box-shadowमान्यता के लिए मौजूदा के साथ बहुत अच्छा काम करता है

— योआन

क्रोम ने कहा कि "color 9999s ease-out, background-color 9999s ease-out";वैधता विस्तार नहीं है। मैंने तब कोड का उपयोग किया, -webkit-transition: background-color 9999s ease-out;और-webkit-text-fill-color: #fff !important;

— नान्से

काम किया, लेकिन मेरे लिए दोहरी बोली के बिना;)

— जॉन

@ याओ आपके मौजूदा box-shadowसत्यापन के साथ वास्तव में कैसे काम करता है ? मेरे मामले में, इस css नियम के कारण, मेरी कस्टम रेड बॉक्स छाया (जो इनपुट त्रुटि को इंगित करता है) देरी हो जाती है, जिससे उपयोगकर्ता को विश्वास होता है कि हाल ही का इनपुट अमान्य है जब वास्तव में यह अच्छा है।

— पॉल रज़वान बर्ग

Answer 5

यह डिजाइनिंग के रूप में इस रंग व्यवहार WebKit से किया गया है के बाद से किया गया है। यह उपयोगकर्ता को यह समझने की अनुमति देता है कि डेटा पूर्वनिर्मित है। बग 1334

आप (या विशिष्ट प्रपत्र नियंत्रण पर) स्वत: पूर्ण बंद कर सकते हैं:

<form autocomplete="off">
...
</form

या आप ऑटोफिल का रंग बदलकर कर सकते हैं:

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

ध्यान दें, इसके लिए एक बग को फिर से काम करने के लिए ट्रैक किया जा रहा है: http://code.google.com/p/chromium/issues/detail?id=46543

यह एक WebKit व्यवहार है।

Comments

धन्यवाद, लेकिन यह कि webkit CSS नियम काम नहीं कर रहा है। उपयोगकर्ता एजेंट स्टाइलशीट हमेशा पृष्ठभूमि रंग को ओवररॉल कर रही है, यहां तक ​​कि इसके (ए) सेट !important(और) उच्च विशिष्टता के लिए आईडी के साथ लक्षित है। ऐसा लगता है कि Chrome हमेशा इसे ओवरराइड करने वाला है। स्वत: पूर्ण हटाने से काम नहीं लगता है, लेकिन यह वास्तव में ऐसा नहीं है जो मैं करना चाहता हूं।

— असंतुष्टगीत

कुछ लोगों का एक ही मुद्दा है, क्या आपने बग पोस्ट की जांच की है? code.google.com/p/chromium/issues/detail?id=1334

— मोहम्मद मंसूर

Chrome उस पीले रंग को ओवरराइड करने के लिए किसी भी सीएसएस प्रयासों को अवरुद्ध करता है। सेटिंग autocomplete="off"निश्चित रूप से पहुंच के मुद्दों को उठाएगी। यह उत्तर वैसे भी क्यों सही है?

— जोहो

यह एक अच्छा समाधान है लेकिन अगर आप रिएक्ट का उपयोग कर रहे हैं, तो यह शिकायत करेगा कि स्वतः पूर्ण एक अज्ञात DOM प्रॉपर्टी है। इसलिए, यह वास्तव में स्वत: पूर्ण (नोटबंदी) है।

— टिम स्कोलिक

ऑटो को बंद करना एक हैक नहीं एक समाधान है

— पाउलो

Answer 6

पल के लिए एक संभावित समाधान छाया के अंदर "मजबूत" सेट करना है:

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

Comments

यह वह समाधान है जो वास्तव में काम कर रहा है, हम केवल कुछ समय के लिए पीले रंग की पृष्ठभूमि को छोड़ना नहीं चाहते हैं, क्योंकि स्वीकृत जवाब में परिणाम होगा।

— davidkonrad

Answer 7

ऑटोफिल स्टाइल को छिपाने के लिए यह कोशिश करें

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }

Comments

जिज्ञासु के लिए, पृष्ठभूमि-रंग का कोई प्रभाव नहीं है। -Webkit- बॉक्स-छाया क्रोम में पीले रंग की पृष्ठभूमि को ओवरराइड करने वाली चतुर बिट है

— गीऊस

Answer 8

उपरोक्त सभी उत्तरों ने काम किया लेकिन उनके दोष थे। नीचे दिया गया कोड उपरोक्त उत्तरों में से दो का समामेलन है जो बिना पलक झपकाए बिना त्रुटिपूर्ण कार्य करता है।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

Comments

मैंने इनपुट फ़ील्ड की पृष्ठभूमि के रूप में एक छवि निर्धारित की है, यह समाधान पीले रंग की छाया को हटा देता है, लेकिन पृष्ठभूमि छवि अभी भी छिपी हुई है

— मैटेओ त्सारीरी

Chrome 83 में मेरे लिए यह एकमात्र काम है। सबसे अधिक मतदान क्रोम 82 तक काम कर रहा था।

— sdlins

Answer 9

एस.ए.एस.एस.

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color

Comments

यह वास्तव में मेरे लिए काम करता है क्योंकि स्वीकृत उत्तर एक पीला पीला चमकता है।

— क्लियो आरआर

सबसे अच्छा समाधान imho

— Jan Paepke

Answer 10

खोज के 2 घंटे के बाद ऐसा लगता है कि Google अभी भी पीले रंग को किसी भी तरह से ओवरराइड करता है, लेकिन मैं इसके लिए तय करता हूं। ये सही है। यह हॉवर, फोकस आदि के लिए भी काम करेगा। आपको बस इतना करना है कि यह महत्वपूर्ण है।

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

यह इनपुट क्षेत्रों से पूरी तरह से पीला हटा देगा

Answer 11

एक घंटे की देरी से इनपुट तत्व पर किसी भी सीएसएस परिवर्तन को रोक दिया जाएगा।
यह संक्रमण एनीमेशन या आंतरिक छाया को जोड़ने के बजाय अधिक बेहतर है।

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}

Answer 12

इसके अलावा:

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

आप भी जोड़ना चाह सकते हैं

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

अन्य बुद्धिमान, जब आप इनपुट पर क्लिक करते हैं, तो पीला रंग वापस आ जाएगा। फ़ोकस के लिए, यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो दूसरा भाग 0 0 8px rgba (82, 168, 236, 0.6) को उजागर करने वाली सीमा के लिए है;

ऐसा है कि यह किसी भी बूटस्ट्रैप इनपुट की तरह दिखेगा।

Answer 13

मेरे पास एक मुद्दा था जहां मैं बॉक्स-शैडो का उपयोग नहीं कर सकता था क्योंकि मुझे पारदर्शी होने के लिए इनपुट फ़ील्ड की आवश्यकता थी। यह एक हैक लेकिन शुद्ध सीएसएस का एक सा है। संक्रमण को बहुत लंबे समय तक सेट करें।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

Comments

नवीनतम Chrome 50.xx में अब तक, आईटी पूरी तरह से ठीक काम कर रहा है। आपका बहुत बहुत धन्यवाद!

— विवेककुपध्याय १४'१६ को

इसके बजाय स्थापित करने की transition-durationहास्यास्पद उच्च, यह बेहतर हो स्थापित करने के लिए होगा transition-delayबजाय। इस तरह आप रंगों में किसी भी बदलाव की संभावना को और भी कम कर सकते हैं।

— झबरा

@ धन्यवाद धन्यवाद, मैं बस एक देरी के लिए बंद कर दिया। बहुत अच्छे।

— एलेक्स

Answer 14

इसे आज़माएं: नाथ-श्वेत उत्तर के रूप में नाबालिग के साथ ऊपर।

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}

Comments

सभी प्रतिक्रियाओं की कोशिश करने के बाद यह सबसे अच्छा जवाब है।

— gfcodix

Answer 15

यदि आप स्वत: पूर्ण कार्यक्षमता को अक्षुण्ण रखना चाहते हैं तो क्रोम की स्टाइलिंग को हटाने के लिए आप jQuery के एक बिट का उपयोग कर सकते हैं। मैंने इसके बारे में एक छोटी पोस्ट यहाँ लिखी है: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-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);
    });
});}

Comments

यह सबसे अच्छा समाधान प्रतीत होता है, हालांकि यह किक्सेंड के मेलचेक को अवरुद्ध करता है । यह कैसे काम करने के बारे में कोई विचार?

— जोआओ

यह एक अच्छा समाधान नहीं है क्योंकि तब से Google क्रोम का पासवर्ड ऑटो पूर्ण काम करना बंद कर देता है। शुरू में आप नाम भरते हैं और Google क्रोम ऑटो पासवर्ड भरता है। हालाँकि एक बार उपरोक्त जावास्क्रिप्ट निष्पादित होने के बाद, नाम हटा दिया जाता है और फिर से सेट हो जाता है, और ऑटो भरा हुआ पासवर्ड खो जाता है

— vanval

Answer 16

मैंने JQuery के बिना जावास्क्रिप्ट का उपयोग करके एक और समाधान विकसित किया है। यदि आपको यह उपयोगी लगता है या मेरे समाधान को फिर से पोस्ट करने का निर्णय लेता है, तो मैं केवल यह पूछता हूं कि आप मेरा नाम शामिल करें। का आनंद लें। - डैनियल फेयरवेदर

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

यह कोड इस तथ्य पर आधारित है कि अतिरिक्त पाठ दर्ज करते ही Google Chrome वेबकिट शैली को हटा देता है। बस इनपुट फ़ील्ड मान को बदलना पर्याप्त नहीं है, क्रोम एक घटना चाहता है। प्रत्येक इनपुट फ़ील्ड (टेक्स्ट, पासवर्ड) पर ध्यान केंद्रित करके, हम एक कीबोर्ड ईवेंट (पत्र 'ए') भेज सकते हैं और फिर टेक्स्ट वैल्यू को पिछली स्थिति (ऑटो-भरे टेक्स्ट) पर सेट कर सकते हैं। ध्यान रखें कि यह कोड प्रत्येक ब्राउज़र में चलेगा और वेबपेज के भीतर प्रत्येक इनपुट फ़ील्ड की जांच करेगा, इसे अपनी आवश्यकताओं के अनुसार समायोजित करेगा।

Comments

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

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

Answer 17

मेरे पास एक शुद्ध सीएसएस समाधान है जो सीएसएस फिल्टर का उपयोग करता है।

filter: grayscale(100%) brightness(110%);

ग्रेस्केल फिल्टर पीले को ग्रे से बदल देता है, फिर चमक ग्रे को हटा देता है।

देखें कोडन

Comments

यह मेरे लिए काम नहीं करता है?

— इकेचुकवु इज़

Answer 18

यह इनपुट, टेक्सारिया के लिए काम करेगा और सामान्य, होवर, फोकस और सक्रिय राज्यों में चयन करेगा।

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

जो SASS / SCSS के साथ काम कर रहे हैं, उनके लिए उपरोक्त समाधान का SCSS संस्करण यहां दिया गया है।

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}

Comments

अच्छा एक, और SASS कोड के लिए thanx!

— बर्नोली आईटी

Answer 19

कम्पास का उपयोग करने वालों के लिए:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}

Answer 20

मैं हार मानता हूं!

चूँकि इनपुट के रंग को स्वतः पूर्ण करने का कोई तरीका नहीं है, इसलिए मैं उन सभी को वेबकिट ब्राउज़र के लिए jQuery के साथ अक्षम करने का निर्णय लेता हूं। ऐशे ही:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}

Answer 21

मुझे एक समाधान मिल गया है यदि आप Google क्रोम से ऑटोफिल को रोकना चाहते हैं, लेकिन इसका थोड़ा सा "माचे" है, तो बस उस वर्ग को हटा दें, जो Google क्रोम उन इनपुट फ़ील्ड में जोड़ता है और "" का मान सेट करता है, यदि आपको दिखाने की आवश्यकता नहीं है लोड के बाद डेटा स्टोर करें।

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});

Answer 22

डैनियल फेयरवेदर का समाधान ( क्रोम स्वतः पूर्ण के लिए इनपुट पृष्ठभूमि रंग को हटाना? ) (मैं उसके समाधान को अपवित्र करना पसंद करूंगा, लेकिन अभी भी 15 प्रतिनिधि की आवश्यकता है) वास्तव में अच्छा काम करता है। अधिकांश उत्कीर्ण समाधान के साथ वास्तव में बहुत बड़ा अंतर है: आप पृष्ठभूमि छवियों को रख सकते हैं! लेकिन थोड़ा संशोधन (सिर्फ क्रोम चेक)

और आपको ध्यान में रखने की आवश्यकता है, यह केवल दृश्य क्षेत्रों पर काम करता है !

इसलिए यदि आप अपने फॉर्म के लिए $ .show () का उपयोग कर रहे हैं, तो आपको शो () इवेंट के बाद इस कोड को चलाने की आवश्यकता है

मेरा पूरा समाधान (मेरे पास लॉगिन फॉर्म के लिए एक शो / छिपा बटन है):

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

क्षमा करें, मैं इसे एक टिप्पणी के रूप में पसंद करूंगा।

यदि आप चाहें, तो मैं उस साइट पर एक लिंक डाल सकता हूं जहां मैंने इसका उपयोग किया था।

Answer 23

और यह मेरे लिए काम किया (क्रोम 76 परीक्षण)

input:-internal-autofill-selected {
    background-color: transparent;
}

Answer 24

मैंने उपरोक्त सभी समाधानों की लगभग कोशिश की। मेरे लिए कुछ भी काम नहीं करता है। अंत में इस समाधान के साथ काम किया। मुझे उम्मीद है कि कोई इसकी मदद करेगा।

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Comments

यह (अब) काम नहीं करता है और इसे CSS ट्रिक्स BTW

— बर्नौली IT

इसने मेरे लिए काम किया।

— अजीजस्टार्क

Answer 25

धन्यवाद बेंजामिन!

Mootools समाधान थोड़ा और मुश्किल है, क्योंकि मैं उपयोग करके फ़ील्ड प्राप्त नहीं कर सकता हूं $('input:-webkit-autofill'), इसलिए मैंने जो उपयोग किया है वह निम्नलिखित है:

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

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}

Answer 26

मेरे लिए काम किए गए समाधानों में से कोई भी, इनसेट छाया मेरे लिए काम नहीं करेगा, क्योंकि इनपुट में पृष्ठ पृष्ठभूमि पर पारभासी पृष्ठभूमि है।

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

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

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

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

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

और क्रोम को नहीं पता है कि यह क्या मारा ... स्वतः पूर्ण टूट गया है!

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

क्रोम 34.0.1847.116, OSX 10.7.5

Answer 27

दुर्भाग्य से सख्ती से उपरोक्त समाधानों में से कोई भी मेरे लिए 2016 में काम नहीं किया (सवाल के कुछ साल बाद)

इसलिए यहाँ आक्रामक समाधान का उपयोग करता हूँ:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

मूल रूप से, यह मूल्य को बचाते हुए टैग को हटाता है, और इसे फिर से बनाता है, फिर मूल्य को वापस रखता है।

Comments

Fareed namrouti द्वारा समाधान मेरे लिए Chrome 51.0.2704.106 / OSX 10.11.5 पर ठीक काम करता है।

— जुआन

Answer 28

मैं इस का उपयोग करें। मेरे लिए काम। क्षेत्र की पीली पृष्ठभूमि को हटा दें।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}

Answer 29

जैसा कि पहले उल्लेख किया गया है, मेरे लिए इनसेट -बेकिट-बॉक्स-शैडो सबसे अच्छा काम करता है।

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

पाठ रंग बदलने के लिए कोड स्निपेट भी:

input:-webkit-autofill:first-line {
     color: #797979;
}

Answer 30

यह मेरे लिए काम किया:

padding: 5px;
background-clip: content-box;