Chrome otomatik tamamlama için giriş arka plan rengi kaldırılsın mı?

Üzerinde çalıştığım bir formda Chrome, e-posta ve şifre alanlarını otomatik olarak dolduruyor. Bu iyidir, ancak Chrome arka plan rengini açık sarı renge dönüştürür.

Üzerinde çalıştığım tasarım karanlık bir arka plan üzerinde açık renkli metin kullanıyor, bu yüzden bu formun görünümünü gerçekten bozuyor - sade sarı kutular ve neredeyse görünmez beyaz metinler var. Alan odaklandıktan sonra alanlar normale döner.

Chrome'un bu alanların rengini değiştirmesini durdurmak mümkün müdür?

Bu iyi çalışır, Giriş kutusu stillerini ve giriş kutusundaki metin stillerini değiştirebilirsiniz:

Burada örneğin herhangi bir renk kullanabilirsiniz white, #DDD, rgba(102, 163, 177, 0.45).

Ama transparentburada çalışmayacak.

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

Ayrıca, metin rengini değiştirmek için bunu kullanabilirsiniz:

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

Tavsiye: Yüzlerce veya binlerce aşırı bulanıklık yarıçapı kullanmayın. Bunun bir yararı yoktur ve işlemci yükünü zayıf mobil aygıtlara yükleyebilir. (Gerçek, dış gölgeler için de geçerlidir). 20 piksel yükseklikte normal bir giriş kutusu için 30 piksel 'bulanıklık yarıçapı' onu mükemmel şekilde kaplar.

Bir kutu-gölge eklemenin önceki çözümleri, düz renk arka plana ihtiyaç duyan insanlar için iyi çalışır. Geçiş eklemenin diğer çözümü işe yarıyor, ancak bir süre / gecikme ayarlamak zorunda kalmak, bir noktada tekrar gösterilebileceği anlamına geliyor.

Benim çözümüm bunun yerine anahtar kareleri kullanmak, böylece her zaman seçtiğiniz renkleri gösterecektir.

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

Örnek Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Daha iyi bir çözümüm var.

Arka planı aşağıdaki gibi başka bir renge ayarlamak, sorunu çözmedi çünkü şeffaf bir giriş alanına ihtiyacım vardı

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

Başka şeyler denedim ve bununla geldim:

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

Bu benim çözümüm, geçiş ve geçiş gecikmesini kullandım, bu nedenle girdi alanlarımda şeffaf bir arka plana sahip olabilirim.

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

Bu renklendirme davranışı WebKit'ten olduğu için bu şekilde tasarlanmıştır. Kullanıcının verilerin önceden doldurulduğunu anlamasını sağlar. Hata 1334

Otomatik tamamlamayı, (veya belirli form denetimini kullanarak) kapatabilirsiniz:

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

Veya aşağıdakileri yaparak otomatik doldurmanın rengini değiştirebilirsiniz:

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

Bunun tekrar çalışması için izlenen bir hata olduğunu unutmayın: http://code.google.com/p/chromium/issues/detail?id=46543

Bu bir WebKit davranışıdır.

Şu an için olası bir çözüm, gölgenin içinde "güçlü" bir ayar yapmaktır:

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

otomatik doldurma stilini gizle için bunu dene

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

Yukarıdaki yanıtların hepsi işe yaradı ancak hataları vardı. Aşağıdaki kod, yanıp sönmeden sorunsuz çalışan yukarıdaki cevaplardan ikisinin birleşmesidir.

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

SUKDÖ'nün

input:-webkit-autofill

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

Arama 2 saat sonra google hala bir şekilde sarı rengi geçersiz kılıyor gibi görünüyor ama bunun için düzeltme. Doğru. Hover, odak vb.Için de işe yarayacaktır. Yapmanız gereken tek şey eklemek! önemli.

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

bu giriş alanlarından sarıları tamamen kaldıracaktır

Bir saatlik gecikme eklenmesi, giriş öğesindeki herhangi bir css değişikliğini duraklatır.
Bu, geçiş animasyonu veya iç gölge eklemek yerine daha iyidir.

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

Buna ek olarak:

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

Ayrıca eklemek isteyebilirsiniz

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

Diğer akıllıca, girdiye tıkladığınızda sarı renk geri gelecektir. Odak için, önyükleme kullanıyorsanız, ikinci bölüm 0 0 8px rgba (82, 168, 236, 0.6);

Öyle ki, herhangi bir önyükleme girdisi gibi görünecek.

Kutu gölgesini kullanamadığım bir sorun yaşadım çünkü giriş alanının şeffaf olması gerekiyordu. Biraz hack ama saf CSS. Geçişi çok uzun bir süreye ayarlayın.

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

Şunu deneyin: Küçük ayarlamalar ile yukarıdaki @ Nathan-beyaz cevapla aynı .

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

Otomatik tamamlama işlevini sağlam tutmak istiyorsanız Chrome'un stilini kaldırmak için biraz jQuery kullanabilirsiniz. Burada kısa bir yazı yazdım: 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);
    });
});}

JQuery olmadan JavaScript kullanarak başka bir çözüm geliştirdim. Bunu yararlı bulursanız veya çözümümü yeniden göndermeye karar verirseniz, yalnızca adımı eklemenizi rica ediyorum. Zevk almak. - 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();
        }
    }
}

Bu kod, Google Chrome'un ek metin girer girmez Webkit stilini kaldırmasına dayanır. Yalnızca giriş alanı değerini değiştirmek yeterli değildir, Chrome bir etkinlik ister. Her bir giriş alanına (metin, şifre) odaklanarak, bir klavye etkinliği ('a' harfi) gönderebilir ve ardından metin değerini önceki durumuna (otomatik doldurulmuş metin) ayarlayabiliriz. Bu kodun her tarayıcıda çalışacağını ve web sayfasındaki her giriş alanını kontrol edeceğini, ihtiyaçlarınıza göre ayarlayacağını unutmayın.

CSS Filtreleri kullanan saf bir CSS çözüm var.

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

Gri tonlamalı filtre sarıyı gri ile değiştirir, ardından parlaklık griyi kaldırır.

KODUYU GÖR

Bu, giriş, metin alanı ve normal, fareyle üzerine gelme, netleme ve etkin durumlarda seçim için çalışır.

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 ile çalışanlar için yukarıdaki çözümün SCSS sürümü.

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

Pusula kullananlar için:

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

Pes ediyorum!

Otomatik tamamlama ile girişin rengini değiştirmenin bir yolu olmadığından, hepsini webkit tarayıcıları için jQuery ile devre dışı bırakmaya karar verdim. Bunun gibi:

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

Google chrome otomatik doldurma önlemek istiyorsanız bir çözüm var ama onun biraz "pala", sadece google chrome bu giriş alanlarına ekler sınıfı kaldırmak ve göstermek gerekiyorsa değeri "" olarak ayarlamak veri yüklendikten sonra saklanır.

$(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'ın çözümü ( Chrome otomatik tamamlama için giriş arka plan rengini kaldırma? ) (Çözümünü oylamak isterim, ancak yine de 15 tekrar gerekir) gerçekten iyi çalışıyor. En çok oylanan çözümle gerçekten büyük bir fark var: arka plan görüntülerini tutabilirsiniz! Ancak küçük bir değişiklik (sadece Chrome kontrolü)

Ve aklınızda bulundurmanız gerekir, SADECE görünür alanlarda çalışır !

Formunuz için $ .show () kullanıyorsanız, show () olayından sonra bu kodu çalıştırmanız gerekir.

Tam çözümüm (Giriş formu için bir göster / gizle düğmeleri var):

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

Tekrar özür dilerim, yorum olmasını tercih ederim.

İsterseniz, kullandığım siteye bir bağlantı koyabilirim.

ve bu benim için çalıştı (Chrome 76 test edildi)

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

Yukarıdaki çözümlerin neredeyse tamamını denedim. Benim için hiçbir şey işe yaramıyor. Sonunda bu çözüm ile çalıştı. Umarım birisi yardım eder.

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

Teşekkürler Benjamin!

Mootools çözümü biraz daha zor, çünkü kullanarak alanları alamıyorum $('input:-webkit-autofill'), Yani kullandığım şey şudur:

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
}

Çözümlerin hiçbiri benim için çalışmadı, girdilerin sayfa arka planının üzerine yerleştirilmiş saydam bir arka planı olduğu için iç gölge benim için çalışmaz.

Bu yüzden kendime, "Chrome belirli bir sayfada neyin otomatik olarak doldurulması gerektiğini nasıl belirler?" Diye sordum.

"Giriş kimlikleri mi, giriş adları mı görünüyor? Form kimlikleri mi? Form eylemi?"

Kullanıcı adı ve şifre girişleriyle yaptığım deneyler sayesinde, Chrome'un otomatik olarak doldurulması gereken alanları bulamamasına neden olacak iki yol vardı:

1) Şifre girişini metin girişinin önüne koyun. 2) Onlara aynı adı ve kimliği verin ... veya hiç isim ve kimlik vermeyin.

Sayfa yüklendikten sonra, javascript ile sayfadaki girişlerin sırasını dinamik olarak değiştirebilir veya dinamik olarak adlarını ve kimliklerini verebilirsiniz ...

Chrome neyin vurduğunu bilmiyor ... otomatik tamamlama bozuk!

Çılgın kesmek, biliyorum. Ama benim için çalışıyor.

Krom 34.0.1847.116, OSX 10.7.5

Ne yazık ki yukarıdaki çözümlerin hiçbiri 2016'da benim için işe yaramadı (sorudan birkaç yıl sonra)

İşte kullandığım agresif çözüm:

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

Temel olarak, değeri kaydederken etiketi siler ve yeniden oluşturur, ardından değeri geri koyar.

Bunu kullanıyorum. benim için çalış. alanın sarı arka planını kaldırın.

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

Daha önce de belirtildiği gibi, inset -webkit-box-shadow benim için en iyisi.

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

Ayrıca metin rengini değiştirmek için snippet'i kodlayın:

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

Bu benim için çalıştı:

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