ต้องการลบสีพื้นหลังของอินพุตสำหรับการเติมข้อความอัตโนมัติของ Chrome หรือไม่

ในแบบฟอร์มที่ฉันใช้งาน Chrome กำลังป้อนข้อมูลในฟิลด์อีเมลและรหัสผ่านโดยอัตโนมัติ อย่างไรก็ตามนี่เป็นเรื่องปกติ แต่ Chrome เปลี่ยนสีพื้นหลังเป็นสีเหลืองอ่อน

การออกแบบที่ฉันกำลังทำอยู่คือการใช้ข้อความตัวอักษรสีอ่อนบนพื้นหลังสีดำดังนั้นนี่จึงทำให้รูปลักษณ์ของฉันยุ่งเหยิง - ฉันมีกล่องสีเหลืองและข้อความสีขาวที่มองไม่เห็น เมื่อฟิลด์ถูกโฟกัสฟิลด์จะกลับสู่ปกติ

เป็นไปได้หรือไม่ที่จะหยุด Chrome ที่จะเปลี่ยนสีของฟิลด์เหล่านี้

ใช้งานได้ดีคุณสามารถเปลี่ยนรูปแบบของกล่องป้อนข้อมูลรวมถึงรูปแบบข้อความภายในกล่องป้อนข้อมูล:

ที่นี่คุณสามารถใช้เช่นสีใด ๆwhite, ,#DDDrgba(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 จะครอบคลุมอย่างสมบูรณ์

วิธีแก้ไขปัญหาก่อนหน้าของการเพิ่มกล่องเงาทำงานได้ดีสำหรับผู้ที่ต้องการพื้นหลังสีทึบ โซลูชันอื่นของการเพิ่มช่วงการเปลี่ยนภาพทำงาน แต่ต้องตั้งระยะเวลา / ล่าช้าจะหมายความว่าในบางจุดอาจแสดงอีกครั้ง

โซลูชันของฉันคือใช้คีย์เฟรมแทนวิธีนั้นจะแสดงสีที่คุณเลือกเสมอ

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

ตัวอย่าง Codepen: https://codepen.io/-Steve-/pen/dwgxPB

ฉันมีทางออกที่ดีกว่า

การตั้งค่าพื้นหลังเป็นสีอื่นเช่นด้านล่างไม่ได้แก้ปัญหาสำหรับฉันเพราะฉันต้องการช่องใส่ที่โปร่งใส

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

นี่เป็นวิธีการแก้ปัญหาของฉันฉันใช้ช่วงการเปลี่ยนภาพและการเปลี่ยนแปลงล่าช้าดังนั้นฉันจึงสามารถมีพื้นหลังโปร่งใสในฟิลด์อินพุตของฉัน

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

สิ่งนี้ได้รับการออกแบบมาเนื่องจากพฤติกรรมการระบายสีนี้มาจาก WebKit ช่วยให้ผู้ใช้เข้าใจข้อมูลที่ได้รับการเติมล่วงหน้า Bug 1334

คุณสามารถปิดการเติมข้อความอัตโนมัติได้โดยทำ (หรือควบคุมแบบฟอร์มเฉพาะ:

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

หรือคุณสามารถเปลี่ยนสีของการป้อนอัตโนมัติโดยทำดังนี้

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

หมายเหตุมีข้อผิดพลาดที่ถูกติดตามเพื่อให้ทำงานได้อีกครั้ง: http://code.google.com/p/chromium/issues/detail?id=46543

นี่คือพฤติกรรม WebKit

วิธีแก้ปัญหาที่เป็นไปได้ในขณะนี้คือตั้งเงาภายใน "แข็งแรง":

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

ลองใช้เพื่อซ่อนสไตล์การป้อนอัตโนมัติ

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

คำตอบข้างต้นทั้งหมดทำงานได้ แต่มีข้อผิดพลาด โค้ดด้านล่างเป็นการรวมกันของคำตอบสองข้อด้านบนที่ทำงานได้อย่างไร้ที่ติโดยไม่กะพริบ

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

SASS

input:-webkit-autofill

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

หลังจาก 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;
  }

นี่จะเป็นการลบสีเหลืองออกจากฟิลด์อินพุต

การเพิ่มการหน่วงเวลาหนึ่งชั่วโมงจะหยุดการเปลี่ยนแปลง CSS ใด ๆ ในองค์ประกอบอินพุต
สิ่งนี้ดีกว่าการเพิ่มแอนิเมชันการเปลี่ยนแปลงหรือเงาภายใน

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

นอกเหนือไปจากนี้:

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

ฉลาดเมื่อคุณคลิกที่อินพุตสีเหลืองจะกลับมา สำหรับการโฟกัสหากคุณใช้ bootstrap ส่วนที่สองใช้สำหรับการเน้นขอบที่ 0 0 8px rgba (82, 168, 236, 0.6);

ดังกล่าวว่ามันจะมีลักษณะเช่นเดียวกับการป้อนข้อมูลบูตใด ๆ

ฉันมีปัญหาที่ฉันไม่สามารถใช้กล่องเงาเพราะฉันต้องการให้ฟิลด์อินพุตมีความโปร่งใส มันเป็นบิตของการแฮ็ก แต่เป็น CSS ที่บริสุทธิ์ ตั้งค่าช่วงการเปลี่ยนภาพเป็นเวลานานมาก

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

ลองนี้: เช่นเดียวกับ @ Nathan-whiteคำตอบด้านบนพร้อมกับปรับแต่งเล็กน้อย

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

หากคุณต้องการให้ฟังก์ชันการเติมข้อความอัตโนมัติยังคงอยู่คุณสามารถใช้ jQuery เพื่อลบรูปแบบของ Chrome ฉันเขียนข้อความสั้น ๆ เกี่ยวกับที่นี่: 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);
    });
});}

ฉันได้พัฒนาโซลูชันอื่นโดยใช้ JavaScript โดยไม่มี JQuery หากคุณพบว่ามีประโยชน์หรือตัดสินใจที่จะโพสต์โซลูชันของฉันอีกครั้งฉันขอให้คุณใส่ชื่อของฉันเท่านั้น สนุก. - Daniel Fairweather

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 ลบสไตล์ Webkit ทันทีที่ป้อนข้อความเพิ่มเติม เพียงแค่เปลี่ยนค่าฟิลด์อินพุตไม่เพียงพอ Chrome ต้องการเหตุการณ์ โดยมุ่งเน้นที่แต่ละช่องใส่ข้อมูล (ข้อความรหัสผ่าน) เราสามารถส่งเหตุการณ์แป้นพิมพ์ (ตัวอักษร 'a') จากนั้นตั้งค่าข้อความให้เป็นสถานะก่อนหน้า (ข้อความที่ป้อนอัตโนมัติ) โปรดทราบว่ารหัสนี้จะทำงานในทุกเบราว์เซอร์และจะตรวจสอบทุกช่องป้อนข้อมูลภายในหน้าเว็บปรับตามความต้องการของคุณ

ฉันมีโซลูชัน CSS บริสุทธิ์ซึ่งใช้ตัวกรอง CSS

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

ฟิลเตอร์สีเทาแทนที่สีเหลืองด้วยสีเทาแล้วความสว่างจะลบสีเทา

ดู CODEPEN

สิ่งนี้จะทำงานสำหรับอินพุตข้อความ textarea และเลือกในสถานะปกติโฮเวอร์โฟกัสและสถานะแอ็คทีฟ

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

นี่คือเวอร์ชัน SCSS ของโซลูชันด้านบนสำหรับผู้ที่ทำงานกับ SASS / SCSS

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

สำหรับผู้ที่ใช้เข็มทิศ:

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

ฉันยอมแพ้!

เนื่องจากไม่มีวิธีการเปลี่ยนสีของการป้อนข้อมูลด้วยการเติมข้อความอัตโนมัติฉันตัดสินใจที่จะปิดการใช้งานทั้งหมดของพวกเขาด้วย jQuery สำหรับเบราว์เซอร์ webkit แบบนี้:

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

ฉันมีวิธีแก้ปัญหาถ้าคุณต้องการป้องกันการป้อนอัตโนมัติจาก google chrome แต่มี "machete" เพียงเล็กน้อยให้ลบคลาสที่ google chrome เพิ่มไปยังฟิลด์อินพุตเหล่านั้นและตั้งค่าเป็น "" ถ้าคุณไม่ต้องการแสดง เก็บข้อมูลหลังจากโหลด

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

วิธีการแก้ปัญหาของ Daniel Fairweather ( การลบสีพื้นหลังของอินพุตสำหรับการเติมข้อความอัตโนมัติของ Chrome หรือไม่ ) (ฉันชอบที่จะอัปเดตโซลูชันของเขา แต่ยังต้องการ 15 ตัวแทน) ทำงานได้ดีจริงๆ มีความแตกต่างอย่างมากกับโซลูชัน upvoted ส่วนใหญ่คุณสามารถเก็บภาพพื้นหลังได้! แต่เป็นการปรับเปลี่ยนเล็กน้อย (เพียงตรวจสอบ Chrome)

และคุณต้องจำไว้มันใช้ได้กับฟิลด์ที่มองเห็นเท่านั้นเท่านั้น!

ดังนั้นหากคุณใช้ $ .show () สำหรับแบบฟอร์มของคุณคุณต้องเรียกใช้โค้ดนี้หลังจากเหตุการณ์ 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();
    }

ขออภัยอีกครั้งฉันต้องการที่จะแสดงความคิดเห็น

ถ้าคุณต้องการฉันสามารถใส่ลิงค์ไปยังเว็บไซต์ที่ฉันใช้

และสิ่งนี้ใช้ได้สำหรับฉัน (ทดสอบโดย Chrome 76)

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

ฉันลองวิธีแก้ปัญหาด้านบนเกือบทั้งหมด ไม่มีอะไรที่เหมาะกับฉัน ในที่สุดก็ทำงานร่วมกับการแก้ปัญหานี้ ฉันหวังว่าจะมีคนช่วยสิ่งนี้

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

ขอบคุณเบนจามิน!

วิธีการแก้ปัญหา 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
}

ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉันเงาตัวแทรกจะใช้งานไม่ได้เพราะอินพุตมีพื้นหลังโปร่งแสงซ้อนทับบนพื้นหลังของหน้า

ดังนั้นฉันจึงถามตัวเองว่า "Chrome จะกำหนดสิ่งที่ควรป้อนอัตโนมัติในหน้าเว็บที่กำหนดได้อย่างไร"

"มันมองหารหัสอินพุท, ชื่ออินพุตหรือไม่?

จากการทดลองของฉันด้วยชื่อผู้ใช้และอินพุตรหัสผ่านมีเพียงสองวิธีที่ฉันพบว่าจะทำให้ Chrome ไม่สามารถหาฟิลด์ที่ควรป้อนอัตโนมัติได้:

1) ใส่รหัสผ่านหน้าของการป้อนข้อความ 2) ให้ชื่อและรหัสเดียวกันกับพวกเขา ... หรือไม่มีชื่อและรหัสเลย

หลังจากที่โหลดหน้าเว็บด้วย javascript คุณสามารถเปลี่ยนลำดับของอินพุตบนหน้าเว็บแบบไดนามิกหรือตั้งชื่อและรหัสให้กับพวกเขาแบบไดนามิก ...

และ Chrome ก็ไม่รู้ว่าอะไรจะกระทบ ... การเติมข้อความอัตโนมัติเสีย!

แฮ็คบ้าฉันรู้ แต่มันใช้งานได้สำหรับฉัน

Chrome 34.0.1847.116, OSX 10.7.5

น่าเสียดายที่ไม่มีวิธีการแก้ปัญหาข้างต้นสำหรับฉันในปี 2559 (สองสามปีหลังจากคำถาม)

ดังนั้นนี่คือทางออกที่ก้าวร้าวที่ฉันใช้:

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

โดยพื้นฐานแล้วมันจะลบแท็กในขณะที่บันทึกค่าและสร้างมันขึ้นมาใหม่จากนั้นจะนำค่ากลับมา

ฉันใช้สิ่งนี้ ทำงานให้ฉัน ลบพื้นหลังสีเหลืองของสนาม

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

ดังที่ได้กล่าวไว้ก่อนหน้านี้สิ่งที่ใส่เข้าไป -webkit-box-shadow สำหรับฉันทำงานได้ดีที่สุด

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

สิ่งนี้ใช้ได้กับฉัน:

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