Bagaimana cara menghentikan Chrome dari menguning kotak input situs saya?

Di antara teks dan alat bantu visual lainnya pada pengiriman formulir, pasca-validasi, saya mewarnai kotak input saya merah untuk menandakan area interaktif yang membutuhkan perhatian.

Di Chrome (dan untuk pengguna Toolbar Google) fitur pengisian otomatis mewarnai ulang input saya dari kuning. Inilah masalahnya yang kompleks: Saya ingin pelengkapan otomatis diizinkan pada formulir saya, karena mempercepat pengguna yang masuk. Saya akan memeriksa kemampuan untuk mematikan atribut autocomplete jika / ketika ada kesalahan yang dipicu, tetapi ini adalah kompleks sedikit pengkodean untuk mematikan pemrograman lengkapi otomatis untuk input tunggal yang terpengaruh pada suatu halaman. Sederhananya, ini akan menjadi sakit kepala besar.

Jadi untuk menghindari masalah itu, apakah ada metode yang lebih sederhana untuk menghentikan Chrome agar tidak kembali mewarnai kotak input?

Saya mencoba saran penting di bawah ini dan tidak berpengaruh. Saya belum memeriksa Google Toolbar untuk melihat apakah atribut penting! Akan berhasil untuk itu.

Sejauh yang saya tahu, tidak ada cara lain selain menggunakan atribut autocomplete (yang tampaknya berfungsi).

Saya tahu di Firefox Anda dapat menggunakan atribut autocomplete = "off" untuk menonaktifkan fungsi autocomplete. Jika ini berfungsi di Chrome (belum diuji), Anda dapat mengatur atribut ini ketika terjadi kesalahan.

Ini dapat digunakan untuk kedua elemen tunggal

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

... juga untuk seluruh formulir

<form autocomplete="off" ...>

Setel properti outline CSS menjadi tidak ada.

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

Dalam kasus di mana browser dapat menambahkan warna latar belakang juga ini dapat diperbaiki oleh sesuatu seperti

:focus { background-color: #fff; }

ini persis apa yang Anda cari!

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

Dengan menggunakan sedikit jQuery, Anda dapat menghapus gaya Chrome sambil menjaga fungsionalitas autocomplete tetap utuh. Saya menulis sebuah posting singkat tentang hal itu di sini: 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);
    });
});}

Untuk menghapus perbatasan untuk semua bidang, Anda dapat menggunakan yang berikut ini:

*:focus { outline:none; }

Untuk menghapus batas untuk bidang tertentu, cukup terapkan kelas ini ke bidang input yang Anda inginkan:

.nohighlight:focus { outline:none; }

Anda tentu saja dapat mengubah perbatasan sesuai keinginan Anda juga:

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

(Dari Bill Beckelman: Abaikan Perbatasan Otomatis Chrome Sekitar Bidang Aktif Menggunakan CSS )

Ya, itu akan menjadi sakit kepala besar, yang menurut saya tidak layak untuk dikembalikan. Mungkin Anda bisa sedikit mengubah strategi UI Anda, dan alih-alih mewarnai kotak merah, Anda bisa mewarnai batas merah, atau meletakkan pita merah kecil di sampingnya (seperti pita "Memuat" gmail) yang memudar ketika kotak berada di fokus.

Ini sepotong kue dengan jQuery:

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

Atau jika Anda ingin sedikit lebih selektif, tambahkan nama kelas untuk pemilih.

Cara yang lebih sederhana menurut saya adalah:

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

2. Gunakan kode ini:

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

Setelah menerapkan @Benjamin solusinya saya menemukan bahwa menekan tombol kembali masih akan memberi saya highlight kuning.

Solusi saya entah bagaimana untuk mencegah highlight kuning ini untuk kembali adalah dengan menerapkan berikut jQuery javascript:

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

Semoga ini bisa membantu siapa pun !!

Ini bekerja. Yang terbaik dari semuanya, Anda dapat menggunakan nilai rgba (hack inset box-shadow tidak bekerja dengan rgba). Ini adalah sedikit tweak dari jawaban Benjamin. Saya menggunakan $ (dokumen) .ready () bukannya $ (window) .load (). Tampaknya bekerja lebih baik untuk saya - sekarang ada jauh lebih sedikit KEBAKARAN. Saya tidak percaya ada dan tidak beruntung menggunakan $ (dokumen) .ready ().

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

untuk versi hari ini, Ini juga berfungsi jika ditempatkan di salah satu dari dua input login. Juga perbaiki versi 40+ dan masalah Firefox terlambat.

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

input:focus { outline:none; }

Itu bekerja sangat baik untuk saya, tetapi lebih dari mungkin untuk menjaga hal-hal seragam di situs Anda, Anda juga ingin memasukkan ini dalam CSS Anda untuk textareas:

textarea:focus { outline:none; }

Juga mungkin tampak jelas bagi sebagian besar tetapi untuk pemula Anda juga dapat mengaturnya ke warna seperti itu:

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

Jika saya ingat dengan benar, aturan penting dalam stylesheet untuk warna latar belakang dari input akan menimpa lengkapi otomatis bilah alat Google - mungkin hal yang sama berlaku untuk Chrome.