Xóa màu nền đầu vào cho Chrome tự động hoàn tất?

Trên biểu mẫu tôi đang làm việc, Chrome sẽ tự động điền các trường email và mật khẩu. Điều này là tốt, tuy nhiên, Chrome thay đổi màu nền thành màu vàng nhạt.

Thiết kế tôi đang thực hiện là sử dụng văn bản sáng trên nền tối, vì vậy điều này thực sự làm rối tung giao diện của biểu mẫu - Tôi có các hộp màu vàng và văn bản màu trắng gần như vô hình. Khi trường được tập trung, các trường trở lại bình thường.

Có thể ngăn Chrome thay đổi màu của các trường này không?

Điều này hoạt động tốt, Bạn có thể thay đổi kiểu hộp đầu vào cũng như kiểu văn bản bên trong hộp nhập:

Ở đây bạn có thể sử dụng bất kỳ màu nào white, ví dụ #DDD, rgba(102, 163, 177, 0.45).

Nhưng transparentsẽ không làm việc ở đây.

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

Ngoài ra, bạn có thể sử dụng điều này để thay đổi màu văn bản:

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

Lời khuyên: Đừng sử dụng bán kính mờ quá mức trong hàng trăm hoặc hàng nghìn. Điều này không có lợi ích và có thể đặt tải bộ xử lý lên các thiết bị di động yếu hơn. (Cũng đúng với bóng thực tế, bên ngoài). Đối với hộp đầu vào bình thường có chiều cao 20px, 'bán kính mờ' 30px sẽ che phủ hoàn hảo.

Các giải pháp trước đây về việc thêm bóng hộp hoạt động tốt cho những người cần một nền màu vững chắc. Giải pháp khác của việc thêm một chuyển đổi hoạt động, nhưng phải đặt thời lượng / độ trễ sẽ có nghĩa là tại một thời điểm nào đó, nó có thể hiển thị lại.

Giải pháp của tôi là sử dụng các khung hình chính thay vào đó, theo cách đó nó sẽ luôn hiển thị màu sắc bạn chọn.

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

Ví dụ Codepen: https://codepen.io/-Steve-/pen/dwgxPB

Tôi có một giải pháp tốt hơn.

Đặt nền sang màu khác như bên dưới không giải quyết được vấn đề cho tôi vì tôi cần trường nhập liệu trong suốt

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

Vì vậy, tôi đã thử một số thứ khác và tôi đã nghĩ ra điều này:

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

Đây là giải pháp của tôi, tôi đã sử dụng quá trình chuyển đổi và trì hoãn chuyển đổi do đó tôi có thể có một nền tảng trong suốt trên các trường đầu vào của mình.

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

Điều này đã được thiết kế vì hành vi tô màu này là từ WebKit. Nó cho phép người dùng hiểu dữ liệu đã được điền sẵn. Lỗi 1334

Bạn có thể tắt tự động hoàn tất bằng cách thực hiện (hoặc trên điều khiển biểu mẫu cụ thể:

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

Hoặc bạn có thể thay đổi màu của tự động điền bằng cách thực hiện:

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

Lưu ý, có một lỗi đang được theo dõi để điều này hoạt động trở lại: http://code.google.com.vn/p/chromium/issues/detail?id=46543

Đây là một hành vi WebKit.

Một cách giải quyết có thể có lúc này là đặt bóng "mạnh" bên trong:

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

Hãy thử điều này để ẩn kiểu tự động điền

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

Tất cả các câu trả lời trên đã làm việc nhưng có lỗi của họ. Đoạn mã dưới đây là sự kết hợp của hai trong số các câu trả lời trên hoạt động hoàn hảo không chớp mắt.

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

Sau 2 giờ tìm kiếm, có vẻ như google vẫn ghi đè lên màu vàng bằng cách nào đó nhưng tôi đã khắc phục nó. Đúng rồi. nó sẽ làm việc cho di chuột, tập trung vv là tốt. tất cả bạn phải làm là thêm! quan trọng với nó.

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

điều này sẽ loại bỏ hoàn toàn màu vàng khỏi các trường đầu vào

Thêm một giờ chậm trễ sẽ tạm dừng mọi thay đổi css trên phần tử đầu vào.
Điều này là tốt hơn thay vì thêm hình ảnh chuyển tiếp hoặc bóng bên trong.

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

Ngoài ra:

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

Bạn cũng có thể muốn thêm

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

Mặt khác, khi bạn nhấp vào đầu vào, màu vàng sẽ quay trở lại. Đối với tiêu điểm, nếu bạn đang sử dụng bootstrap, phần thứ hai dành cho đường viền làm nổi bật 0 0 8px rgba (82, 168, 236, 0.6);

Như vậy nó sẽ trông giống như bất kỳ đầu vào bootstrap.

Tôi gặp vấn đề khi không thể sử dụng bóng hộp vì tôi cần trường đầu vào trong suốt. Đó là một chút hack nhưng CSS thuần túy. Đặt quá trình chuyển đổi thành một khoảng thời gian rất dài.

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

Hãy thử điều này: Tương tự như câu trả lời @ Nathan-trắng ở trên với các điều chỉnh nhỏ.

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

Nếu bạn muốn giữ nguyên chức năng tự động hoàn thành, bạn có thể sử dụng một chút jQuery để xóa kiểu dáng của Chrome. 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);
    });
});}

Tôi đã phát triển một giải pháp khác bằng JavaScript mà không cần JQuery. Nếu bạn thấy điều này hữu ích hoặc quyết định đăng lại giải pháp của tôi, tôi chỉ yêu cầu bạn bao gồm tên của tôi. Thưởng thức. - 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();
        }
    }
}

Mã này dựa trên thực tế là Google Chrome sẽ loại bỏ kiểu Webkit ngay khi nhập văn bản bổ sung. Chỉ cần thay đổi giá trị trường đầu vào là không đủ, Chrome muốn có một sự kiện. Bằng cách tập trung vào từng trường nhập (văn bản, mật khẩu), chúng tôi có thể gửi một sự kiện bàn phím (chữ 'a') và sau đó đặt giá trị văn bản về trạng thái trước đó (văn bản tự động điền). Hãy nhớ rằng mã này sẽ chạy trong mọi trình duyệt và sẽ kiểm tra mọi trường đầu vào trong trang web, điều chỉnh nó phù hợp với nhu cầu của bạn.

Tôi có một giải pháp CSS thuần sử dụng Bộ lọc CSS.

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

Bộ lọc thang độ xám thay thế màu vàng bằng màu xám, sau đó độ sáng sẽ loại bỏ màu xám.

XEM CODEPEN

Điều này sẽ làm việc cho đầu vào, textarea và chọn ở trạng thái bình thường, di chuột, tập trung và hoạt động.

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

Đây là phiên bản SCSS của giải pháp trên cho những người đang làm việc với SASS / SCSS.

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

Đối với những người đang sử dụng La bàn:

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

Tôi từ bỏ!

Vì không có cách nào để thay đổi màu của đầu vào bằng tự động hoàn tất, tôi quyết định vô hiệu hóa tất cả chúng bằng jQuery cho các trình duyệt webkit. Như thế này:

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

Tôi đã có một giải pháp nếu bạn muốn ngăn tự động điền từ google chrome nhưng nó hơi "dao rựa", chỉ cần xóa lớp mà google chrome thêm vào các trường đầu vào đó và đặt giá trị thành "" nếu bạn không cần hiển thị lưu trữ dữ liệu sau khi tải.

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

Giải pháp của Daniel Fairweather ( Xóa màu nền đầu vào cho tự động hoàn thành Chrome? ) (Tôi rất muốn nâng cấp giải pháp của mình, nhưng vẫn cần 15 đại diện) hoạt động thực sự tốt. Có một sự khác biệt rất lớn với hầu hết các giải pháp nâng cao: bạn có thể giữ hình nền! Nhưng một chút sửa đổi (chỉ cần kiểm tra Chrome)

Và bạn cần lưu ý, nó CHỈ hoạt động trên các trường nhìn thấy !

Vì vậy, nếu bạn đang sử dụng $ .show () cho biểu mẫu của mình, bạn cần chạy mã này sau sự kiện show ()

Giải pháp đầy đủ của tôi (Tôi có một nút hiển thị / ẩn cho hình thức đăng nhập):

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

Xin lỗi một lần nữa, tôi muốn nó là một bình luận.

Nếu bạn muốn, tôi có thể đặt một liên kết đến trang web nơi tôi đã sử dụng nó.

và điều này làm việc cho tôi (Chrome 76 đã thử nghiệm)

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

Tôi đã thử gần như tất cả các giải pháp trên. Không có gì làm việc cho tôi. Cuối cùng đã làm việc với giải pháp này. Tôi hy vọng ai đó giúp đỡ điều này.

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

Cảm ơn Benjamin!

Giải pháp Mootools phức tạp hơn một chút, vì tôi không thể có được các trường bằng cách sử dụng $('input:-webkit-autofill'), vì vậy những gì tôi đã sử dụng là như sau:

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
}

Không có giải pháp nào phù hợp với tôi, bóng trong sẽ không hoạt động với tôi vì các đầu vào có nền mờ được phủ lên trên nền trang.

Vì vậy, tôi đã tự hỏi: "Làm thế nào để Chrome xác định những gì nên được tự động điền trên một trang nhất định?"

"Nó có tìm id đầu vào, tên đầu vào không? Id mẫu? Hành động biểu mẫu?"

Thông qua thử nghiệm của tôi với tên người dùng và mật khẩu đầu vào, chỉ có hai cách tôi thấy sẽ khiến Chrome không thể tìm thấy các trường nên được tự động điền:

1) Đặt mật khẩu đầu vào trước đầu vào văn bản. 2) Cung cấp cho họ cùng tên và id ... hoặc không có tên và id nào cả.

Sau khi tải trang, với javascript, bạn có thể tự động thay đổi thứ tự của các đầu vào trên trang hoặc tự động cung cấp cho chúng tên và id của chúng ...

Và Chrome không biết điều gì đã xảy ra ... tự động hoàn tất bị hỏng!

Hack điên, tôi biết. Nhưng nó làm việc cho tôi.

Chrome 34.0.1847.116, OSX 10.7.5

Thật không may, không có giải pháp nào ở trên cho tôi vào năm 2016 (một vài năm sau câu hỏi)

Vì vậy, đây là giải pháp tích cực mà tôi sử dụng:

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

Về cơ bản, nó xóa thẻ trong khi lưu giá trị và tạo lại nó, sau đó đặt lại giá trị.

tôi dùng cái này làm việc cho tôi. loại bỏ nền màu vàng của trường.

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

Như đã đề cập trước đó, inset -webkit-box-Shadow đối với tôi hoạt động tốt nhất.

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

Ngoài ra đoạn mã để thay đổi màu văn bản:

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

Điều này làm việc cho tôi:

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