Chrome'un sitemin giriş kutularını sararmasını nasıl önleyebilirim?

Form gönderme, doğrulama sonrası diğer metin ve görsel yardımların yanı sıra, dikkat edilmesi gereken etkileşimli alanı belirtmek için giriş kutularımı kırmızıya boyayorum.

Chrome'da (ve Google Araç Çubuğu kullanıcıları için) otomatik doldurma özelliği, giriş formlarımı yeniden renklendirir. İşte karmaşık sorun: Kullanıcıların oturum açmasını hızlandırdığı için formlarımda otomatik tamamlamaya izin istiyorum. Bir hata tetiklendiğinde / olduğunda otomatik tamamlama özelliğini kapatma yeteneğini kontrol edeceğim, ancak karmaşık bir sayfada etkilenen tek giriş için otomatik tamamlamayı programlı olarak kapatmak üzere kodlama biti. Bu, basitçe söylemek gerekirse, büyük bir baş ağrısı olacaktır.

Bu sorunu önlemek için Chrome'un giriş kutularını yeniden renklendirmesini önlemenin daha basit bir yöntemi var mı?

Aşağıdaki önemli öneriyi denedim ve hiçbir etkisi olmadı. Önemli özelliğin bunun için işe yarayıp yaramayacağını görmek için henüz Google Araç Çubuğu'nu kontrol etmedim.

Anlayabildiğim kadarıyla, otomatik tamamlama özelliğini kullanmaktan başka bir yol yoktur (ki bu işe yarıyor gibi görünüyor).

Firefox'ta otomatik tamamlama işlevini devre dışı bırakmak için autocomplete = "off" özelliğini kullanabileceğinizi biliyorum. Bu Chrome'da çalışıyorsa (test edilmemişse), bir hatayla karşılaştığınızda bu özelliği ayarlayabilirsiniz.

Bu, hem tek bir öğe için kullanılabilir

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

... ve tüm form için

<form autocomplete="off" ...>

CSS anahat özelliğini yok olarak ayarlayın.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

Tarayıcının bir arka plan rengi de ekleyebileceği durumlarda, bu gibi bir şeyle düzeltilebilir

:focus { background-color: #fff; }

tam olarak aradığın şey bu!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

Biraz jQuery kullanarak, otomatik tamamlama işlevini korurken Chrome'un stilini kaldırabilirsiniz. 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);
    });
});}

Tüm alanların kenarlığını kaldırmak için aşağıdakileri kullanabilirsiniz:

*:focus { outline:none; }

Seçili alanların kenarlığını kaldırmak için bu sınıfı istediğiniz giriş alanlarına uygulamanız yeterlidir:

.nohighlight:focus { outline:none; }

Elbette sınırı istediğiniz gibi değiştirebilirsiniz:

.changeborder:focus { outline:Blue Solid 4px; }

(Bill Beckelman'dan: Chrome'un CSS Kullanarak Etkin Alanların Çevresindeki Otomatik Kenarlığını Geçersiz Kıl )

Evet, bence dönüşe değmeyen büyük bir baş ağrısı olurdu. Belki UI stratejinizi biraz değiştirebilir ve kutuyu kırmızı renklendirmek yerine, sınırları kırmızı renklendirebilir veya kutuya girdiğinde kaybolan küçük bir kırmızı bant ("Yükleme" bandı gibi) odaklanır.

JQuery ile bir parça kek:

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

Ya da biraz daha seçici olmak istiyorsanız, bir seçici için bir sınıf adı ekleyin.

Bence daha basit bir yol:

1. Al http://www.quirksmode.org/js/detect.html

2. Bu kodu kullanın:

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };

@Benjamin çözümünü uyguladıktan sonra geri düğmesine basmanın bana hala sarı vurgu yapacağını öğrendim.

Benim çözüm bir şekilde bu sarı vurgu geri gelmesini önlemek için aşağıdaki jQuery javascript uygulamaktır:

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

Umarım herkese yardımcı olur !!

Bu çalışıyor. En iyisi, rgba değerlerini kullanabilirsiniz (kutu-gölge iç metin kesmek rgba ile çalışmaz). Bu @ Benjamin'in cevabında küçük bir değişiklik. $ (Window) .load () yerine $ (document) .ready () kullanıyorum. Benim için daha iyi çalışıyor gibi görünüyor - şimdi çok daha az FOUC var. $ (Document) .ready () kullanmanın dezavantajları olduğuna inanmıyorum.

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

bugünün sürümleri için, bu, iki giriş girişinden birine yerleştirildiğinde de çalışır. Ayrıca sürüm 40+ ve geç Firefox sorununu düzeltin.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

Bu benim için harika çalıştı, ancak sitenizdeki şeyleri tekdüze tutması daha olasıdır, bunu textareas için CSS'nize de dahil etmek isteyeceksiniz:

textarea:focus { outline:none; }

Ayrıca çoğu için açık gibi görünebilir, ancak yeni başlayanlar için bunu bir renge de ayarlayabilirsiniz:

input:focus { outline:#HEXCOD SOLID 2px ; }

Doğru hatırlıyorsam, girişlerin arka plan rengi için stil sayfasındaki!! Önemli bir kural Google araç çubuğu otomatik tamamlamasını geçersiz kılar - muhtemelen aynı Chrome için de geçerlidir.