Làm cách nào để ngăn Chrome không tô màu các hộp nhập của trang web của tôi?

Trong số các công cụ hỗ trợ văn bản và hình ảnh khác khi gửi biểu mẫu, xác thực sau, tôi tô màu các ô nhập liệu của mình thành màu đỏ để biểu thị khu vực tương tác cần chú ý.

Trên Chrome (và đối với người dùng Thanh công cụ Google), tính năng tự động điền lại màu cho mẫu nhập của tôi màu vàng. Đây là vấn đề phức tạp: Tôi muốn tự động hoàn tất cho phép trên các biểu mẫu của mình, vì nó tăng tốc độ đăng nhập của người dùng. Tôi sẽ kiểm tra khả năng tắt thuộc tính tự động hoàn thành nếu / khi có lỗi được kích hoạt, nhưng nó phức tạp bit mã hóa để lập trình tắt tự động hoàn thành cho đầu vào bị ảnh hưởng duy nhất trên một trang. Điều này, nói một cách đơn giản, sẽ là một vấn đề đau đầu.

Vì vậy, để cố gắng tránh vấn đề đó, có phương pháp nào đơn giản hơn để ngăn Chrome tô màu lại các hộp đầu vào không?

[sửa] Tôi đã thử gợi ý quan trọng dưới đây và nó không có kết quả. Tôi chưa kiểm tra Thanh công cụ của Google để xem liệu thuộc tính! Quan trọng có hoạt động cho điều đó không.

Theo như tôi có thể nói, không có bất kỳ phương tiện nào khác ngoài việc sử dụng thuộc tính tự động hoàn thành (có vẻ như hoạt động).

Tôi biết trong Firefox bạn có thể sử dụng thuộc tính autocomplete = "off" để tắt chức năng tự động hoàn thành. Nếu điều này hoạt động trong Chrome (chưa được thử nghiệm), bạn có thể đặt thuộc tính này khi gặp lỗi.

Điều này có thể được sử dụng cho cả một yếu tố duy nhất

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

... cũng như cho toàn bộ hình thức

<form autocomplete="off" ...>

Đặt thuộc tính phác thảo CSS thành không.

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

Trong trường hợp trình duyệt có thể thêm màu nền, điều này có thể được sửa bằng một cái gì đó như

:focus { background-color: #fff; }

đây chính xác là những gì bạn đang tìm kiếm!

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

Bằng cách sử dụng một chút jQuery, bạn có thể xóa kiểu dáng của Chrome trong khi vẫn giữ nguyên chức năng tự động hoàn thành. Tôi đã viết một bài viết ngắn về nó ở đây: 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);
    });
});}

Để xóa đường viền cho tất cả các trường, bạn có thể sử dụng như sau:

*:focus { outline:none; }

Để xóa đường viền cho các trường được chọn, chỉ cần áp dụng lớp này cho các trường đầu vào bạn muốn:

.nohighlight:focus { outline:none; }

Tất nhiên bạn cũng có thể thay đổi đường viền theo ý muốn của mình:

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

(Từ Bill Beckelman: Ghi đè Đường viền tự động của Chrome quanh các trường đang hoạt động bằng CSS )

Vâng, nó sẽ là một vấn đề đau đầu, mà theo tôi không đáng để trả lại. Có lẽ bạn có thể điều chỉnh chiến lược UI của mình một chút và thay vì tô màu đỏ cho hộp, bạn có thể tô màu viền đỏ hoặc đặt một cuộn băng nhỏ màu đỏ bên cạnh nó (như băng "Đang tải" của gmails) mờ dần khi hộp nằm trong tiêu điểm.

Đó là một miếng bánh với jQuery:

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

Hoặc nếu bạn muốn chọn lọc hơn một chút, hãy thêm tên lớp cho bộ chọn.

Cách đơn giản hơn theo ý kiến ​​của tôi là:

1. Nhận http://www.quirksmode.org/js/detect.html

2. Sử dụng mã này:

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

Sau khi áp dụng @Benjamin giải pháp của mình, tôi phát hiện ra rằng nhấn nút quay lại vẫn sẽ cho tôi màu vàng nổi bật.

Giải pháp của tôi bằng cách nào đó để ngăn chặn sự nổi bật màu vàng này trở lại là bằng cách áp dụng javascript jQuery sau đây:

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

Hy vọng nó sẽ giúp được ai !!

Những công việc này. Tuyệt vời nhất, bạn có thể sử dụng các giá trị rgba (bản hack trong hộp bóng tối không hoạt động với rgba). Đây là một điều chỉnh nhỏ trong câu trả lời của @ Benjamin. Tôi đang sử dụng $ (tài liệu). Đã () thay vì $ (cửa sổ) .load (). Nó dường như hoạt động tốt hơn đối với tôi - bây giờ có ít FOUC hơn. Tôi không tin có những nhược điểm khi sử dụng $ (tài liệu). Đã ().

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

đối với các phiên bản ngày nay, Điều này cũng hoạt động nếu được đặt ở một trong hai đầu vào đăng nhập. Cũng sửa phiên bản 40+ và sự cố Firefox muộn.

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

input:focus { outline:none; }

Điều đó làm việc rất tốt cho tôi nhưng nhiều khả năng sẽ giữ mọi thứ thống nhất trên trang web của bạn, bạn sẽ muốn đưa điều này vào CSS cho văn bản:

textarea:focus { outline:none; }

Ngoài ra nó có vẻ rõ ràng đối với hầu hết nhưng đối với người mới bắt đầu, bạn cũng có thể đặt nó thành một màu như vậy:

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

Nếu tôi nhớ chính xác, một quy tắc quan trọng! Trong biểu định kiểu cho màu nền của các đầu vào sẽ ghi đè tự động thanh công cụ Google - có lẽ điều tương tự cũng sẽ đúng với Chrome.