Ghi đè điền biểu mẫu và tô sáng đầu vào bằng HTML / CSS

139

Tôi có 2 hình thức cơ bản - đăng nhập và đăng ký, cả hai trên cùng một trang. Bây giờ, tôi không có vấn đề gì với hình thức tự động điền vào,nhưng mẫu đăng ký cũng tự động điền và tôi không thích nó.

Ngoài ra, các kiểu biểu mẫu có nền màu vàng mà tôi không thể quản lý để ghi đè và tôi không muốn sử dụng CSS nội tuyến để làm như vậy. Tôi có thể làm gì để khiến chúng ngừng có màu vàngvà (có thể) tự động điền? Cảm ơn trước!

html  css  input  autofill 
— casraf
nguồn
4
Bạn thực sự đang hỏi hai câu hỏi ở đây: Làm cách nào để tắt tự động điền biểu mẫu? -AND- Làm cách nào để ghi đè nền màu vàng khi tự động điền biểu mẫu được bật? Điều này không rõ ràng cho đến khi tôi đọc tất cả các ý kiến ​​trong các câu trả lời dưới đây. Bạn có thể muốn xem xét việc chỉnh sửa câu hỏi của mình (đặc biệt là khi bạn đã đi xa để cung cấp tiền thưởng).
— benzado
Bạn nói đúng, đã chỉnh sửa. Hoặc một phiên bản lười biếng của nó dù sao đi nữa.
— casraf
1
Là người dùng biểu mẫu, tôi không muốn khả năng sử dụng của mình bị tê liệt vì sở thích trực quan của bạn bằng cách buộc tự động hoàn thành và làm nổi bật. Hãy để người dùng tắt cái này, không phải bạn. Để lại trải nghiệm duyệt web của tôi một mình.
— Byran Zaugg
Đó là điều, tôi chỉ vô hiệu hóa tự động hoàn thành trong biểu mẫu ĐĂNG KÝ, về cơ bản, không nên tự động hoàn thành thường xuyên, thông tin hoàn thành chỉ được tạo khi bạn đăng ký. Đối với biểu mẫu đăng nhập, tôi muốn tiếp tục tự động hoàn tất, nhưng chỉ cần tắt màu câm mà nó đặt trên các trường nhập vì văn bản bên trong trở nên không thể đọc được - nền màu vàng và màu văn bản là màu trắng (nền ban đầu là màu xám đậm) .
— casraf
1
— zzzzBov

Câu trả lời:

163

để tự động hoàn thành, bạn có thể sử dụng:

<form autocomplete="off">

liên quan đến vấn đề tô màu:

từ ảnh chụp màn hình của bạn, tôi có thể thấy rằng webkit tạo kiểu sau:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) vì kiểu # id thậm chí còn quan trọng hơn kiểu. Class, những điều sau đây có thể hoạt động:

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) nếu điều đó không hiệu quả, bạn có thể thử đặt kiểu thông qua javascript theo lập trình 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) nếu điều đó không hiệu quả, bạn sẽ phải chịu số phận :-) hãy xem xét điều này: điều này sẽ không ẩn màu vàng, nhưng sẽ làm cho văn bản có thể đọc lại được.

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

4) một giải pháp css / javascript:

css:

input:focus {
    background-position: 0 0;
}

và javascript sau phải được chạy khi tải:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

ví dụ:

<body onload="loadPage();">

chúc may mắn :-)

5) Nếu không có công việc nào ở trên thử xóa các phần tử đầu vào, sao chép chúng, sau đó đặt các phần tử được sao chép lại trên trang (hoạt động trên Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Từ đây :

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);
        });
    });
}
— Phil Rykoff
nguồn
(1) không hoạt động. Tôi sẽ thử (2) khi tôi trở về nhà; hy vọng rằng JS có thể ghi đè lên điều này; cảm ơn :)
— casraf
1
(4) chắc chắn loại bỏ màu vàng: đường viền tiêu điểm.
— ruruskyi
Nếu bit cuối cùng không hoạt động với bạn và bạn có biết javascript hoạt động như thế nào (có Id đúng không, v.v.) Bạn có thể gặp sự cố tôi gặp phải, tôi đang sử dụng jquery mobile vì một số lý do và điều này sẽ xuất hiện sau và thay thế các đầu vào dường như. Vì vậy, những gì tôi đã làm là đặt một khoảng thời gian sao chép nó cứ sau 50 ms (nó hoạt động sau 400ms khi sử dụng setTimeout nhưng tôi không muốn mạo hiểm kết nối chậm). Và sau một giây, khoảng thời gian được xóa:code
— Mathijs Segers
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs
Tôi đang gặp vấn đề tương tự với Safari trên Mavericks. Nhưng khi tôi sử dụng phương pháp 5, họ sẽ giải quyết nó trong một giây (hoặc ba giây khi tôi đặt thời gian chờ là 3000) và sau đó trình duyệt thắng và tôi đã bật tự động hoàn tất. Trong trường hợp sử dụng của tôi, tôi đang hỏi người dùng tên người dùng / mật khẩu của họ cho một trang web khác để tôi có thể lấy thông tin từ trang khác, vì vậy tôi chắc chắn không muốn nó tự động điền tên người dùng và mật khẩu họ sử dụng cho trang web của mình. Bạn có suy nghĩ gì về điều này (ngoài số phận của bản gốc số 3) không?
— Jack RG
218

Lừa nó với một cái 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: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— Tamás Pap
nguồn
10
Điều này thực sự thông minh. :)
— Jordan Gray
3
+1000 (nếu tôi có thể) Vâng, tôi không thể tìm ra cách nào khác để làm điều này. Điều này thực sự xâm phạm webkit ...
— o_O
1
thật tuyệt vời, đây sẽ là câu trả lời số một, đơn giản và hiệu quả
— Pixelomo 12/2/2015
3
Điều này là tuyệt vời ở chỗ nó hoạt động và thực sự sáng tạo. Nhưng nó làm tôi nhớ đến các bản hack IE6 cũ và những thứ tương tự. Một loại crappy của google để cung cấp cho chúng tôi: -webkit-autofill tham số và không để các nhà thiết kế ghi đè mặc định, phải không?
— squarecandy
1
Cung cấp lựa chọn màu sắc không thể tùy chỉnh sẽ không giúp ích cho khả năng sử dụng cũng như khả năng truy cập. Những lo ngại đó vẫn hoàn toàn nằm trong tay nhà phát triển, ngoại trừ vụ hack bực bội này trong Chrome. Không ai có thể phạm lỗi với ý định của các nhà phát triển Chrome, chỉ là kết quả.
— Âm lịch
25

Thêm quy tắc CSS này và màu nền vàng sẽ biến mất. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
nguồn
1
Điều này làm việc cho tôi - cảm ơn! (mặc dù tôi cần thay đổi màu trắng thành màu tôi thực sự muốn)
— jennEDVT
2
Rõ ràng câu trả lời tốt nhất.
— Brandon Harris
16 
<form autocomplete="off">

Khá nhiều tất cả các trình duyệt hiện đại sẽ tôn trọng điều đó.

— Jason Kester
nguồn
7
Tuyệt vời, nhưng nó chỉ giải quyết vấn đề ít quan trọng hơn; Làm cách nào tôi có thể giữ tự động hoàn tất nhưng mất kiểu webkit ( prntscr.com/4hkh ) làm giảm cổ họng của nó? o: cảm ơn mặc dù
— casraf
1
Thật ra, nó nên làm cả hai. Hộp chỉ chuyển sang màu vàng để cho bạn biết rằng chrome / safari / ff đã tự động điền nó bằng mật khẩu của bạn. Nếu bạn bảo nó không lấp đầy, nó sẽ không có cơ hội tô màu cho nó.
— Jason Kester
11
vâng, nhưng hãy nhìn vào những gì tôi đã nói: "làm thế nào tôi có thể giữ tự động hoàn thành nhưng mất đi các kiểu webkit kiểu "
— casraf
Vấn đề duy nhất autocompletelà nó không hợp lệ trong HTML trước phiên bản 5.
— Paul D. Chờ
15

Sau 2 giờ tìm kiếm, có vẻ như Google Chrome vẫn ghi đè màu vàng bằng cách nào đó, nhưng tôi đã tìm thấy cách khắc phục. 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 !importantvào 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 từ các trường đầu vào

— không
nguồn
Nó hoạt động với tôi mà không có 1000px, chỉ 0 ở mọi nơi, -webkit-box-Shadow: 0 0 0 0 inset trắng! Quan trọng;
— Luis Lopez
3

Bạn cũng có thể thay đổi thuộc tính tên của các thành phần biểu mẫu của bạn thành một cái gì đó được tạo để trình duyệt sẽ không theo dõi nó. TUY NHIÊN firefox 2.x + và google chrome dường như không có nhiều vấn đề với điều đó nếu url yêu cầu giống hệt nhau. Về cơ bản, hãy thử thêm thông số yêu cầu muối và tên trường muối cho mẫu đăng ký.

Tuy nhiên tôi nghĩ autocomplete = "off" vẫn là giải pháp hàng đầu :)

— Dmitriy Likhten
nguồn
3

Bạn có thể tắt tự động hoàn thành kể từ HTML5 (thông qua autocomplete="off"), nhưng bạn KHÔNG THỂ ghi đè phần tô sáng của trình duyệt. Bạn có thể thử nhắn tin với::selection CSS (hầu hết các trình duyệt yêu cầu tiền tố của nhà cung cấp để hoạt động), nhưng điều đó có lẽ sẽ không giúp bạn.

Trừ khi nhà cung cấp trình duyệt thực hiện cụ thể cách ghi đè cụ thể của nhà cung cấp, bạn không thể làm bất cứ điều gì về các kiểu như vậy đã có ý định ghi đè lên biểu định kiểu của trang web cho người dùng. Chúng thường được áp dụng sau khi bảng định kiểu của bạn được áp dụng và bỏ qua phần ! importantghi đè.

— Mận Alan
nguồn
3

Đôi khi tự động hoàn tất trên trình duyệt vẫn tự động hoàn tất khi bạn chỉ có mã trong <form>phần tử.

Tôi đã cố gắng đặt nó trong <input>phần tử là tốt và nó hoạt động tốt hơn.

<form autocomplete="off">  AND  <input autocomplete="off">

Tuy nhiên, việc hỗ trợ cho thuộc tính này không còn nữa, vui lòng đọc https://ormszilla.mozilla.org/show_orms.cgi?id=956906#c1

https://ormszilla.mozilla.org/show_orms.cgi?id=956906

Một công việc khác mà tôi đã tìm thấy là loại bỏ các trình giữ chỗ bên trong các trường đầu vào gợi ý rằng đó là email, tên người dùng hoặc trường điện thoại (ví dụ: "Email của bạn", "Email", v.v.))

nhập mô tả hình ảnh ở đây

Điều này làm cho nó để các trình duyệt không biết nó thuộc loại lĩnh vực nào, do đó không cố gắng tự động hoàn thành nó.

— andstud.io
nguồn
Điều tôi thích ở đây là hầu hết mọi người KHÔNG đánh giá cao toàn bộ biểu mẫu không được điền vào một trang tải lại (ví dụ: một vùng văn bản dài), nhưng cho phép nhà phát triển ngăn chặn một số yếu tố nhất định (ví dụ số thẻ ngân hàng). Mặc dù khó chịu, nhưng việc hỗ trợ cho thuộc tính này không còn nữa
— Luke Madhanga
1

Nếu đó là trong trường đầu vào, bạn đang cố gắng "bỏ màu vàng" ...

  1. Đặt màu nền cho css ... giả sử #ccc (màu xám nhạt).
  2. Thêm giá trị = "đôi khi", tạm thời điền vào trường bằng "đôi khi"
  3. (tùy chọn) Thêm một ít javascript để làm cho "đôi khi" rõ ràng khi bạn đi để đặt văn bản thực sự vào.

Vì vậy, nó có thể trông như thế này:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— bạch Mã
nguồn
1

Điều này khắc phục sự cố trên cả Safari và Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— Arjan
nguồn
1
Tôi tin là như vậy nhưng sẽ không hơi khó khăn khi làm điều này 50 lần mỗi giây? Tôi biết nó sẽ hoạt động và sẽ không quá chậm. Nhưng có vẻ hơi quá.
— Mathijs
0

Ảnh chụp màn hình bạn liên kết để nói rằng WebKit đang sử dụng bộ chọn input:-webkit-autofillcho các thành phần đó. Bạn đã thử đặt cái này vào CSS chưa?

input:-webkit-autofill {
    background-color: white !important;
}

Nếu điều đó không làm việc, thì có lẽ sẽ không có gì. Các trường đó được tô sáng để cảnh báo người dùng rằng họ đã được tự động điền thông tin cá nhân (như địa chỉ nhà của người dùng) và có thể lập luận rằng việc cho phép một trang ẩn đi cho phép rủi ro bảo mật.

— bánh nướng
nguồn
0

Phần formtử có một autocompletethuộc tính mà bạn có thể đặt thành off. Đối với CSS, lệnh !importantsau khi thuộc tính giữ cho nó không bị ghi đè:

background-color: white !important;

Chỉ IE6 không hiểu nó.

Nếu tôi hiểu lầm bạn, đó cũng là outlinetài sản mà bạn có thể thấy hữu ích.

— zneak
nguồn
2
Chrome dường như bỏ qua! Điều quan trọng khi nó tự động điền các trường đầu vào
— Torandi
@Torandi Có thể là do các bảng định kiểu tác nhân người dùng. Cài đặt từ các bảng định kiểu tác nhân người dùng nên áp dụng sau cùng, trừ khi nó có lệnh !important, trong trường hợp đó, nó được ưu tiên hơn mọi thứ khác. Bạn nên kiểm tra biểu định kiểu tác nhân người dùng của bạn (mặc dù tôi không biết tìm nó ở đâu).
— zneak
0

Tôi đã thấy tính năng tự động hoàn tất của thanh công cụ Google bị vô hiệu hóa với javascript. Nó có thể hoạt động với một số công cụ tự động điền khác; Tôi không biết liệu nó có giúp với các trình duyệt được tích hợp tự động không.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— Ađam
nguồn
0

Sau khi thử rất nhiều thứ, tôi đã tìm thấy các giải pháp làm việc đã loại bỏ các trường tự động điền và thay thế chúng bằng các bản sao. Không để mất các sự kiện đính kèm, tôi đã đưa ra một giải pháp khác (hơi dài dòng).

Tại mỗi sự kiện "đầu vào", nó nhanh chóng gắn các sự kiện "thay đổi" vào tất cả các đầu vào có liên quan. Nó kiểm tra nếu chúng đã được tự động điền. Nếu có, sau đó gửi một sự kiện văn bản mới sẽ lừa trình duyệt nghĩ rằng giá trị đã được thay đổi bởi người dùng, do đó cho phép xóa nền màu vàng.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— Ernest Karlsons
nguồn
0

Giải pháp javascript đơn giản cho tất cả các trình duyệt:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Sao chép đầu vào, đặt lại thuộc tính và ẩn đầu vào ban đầu. Thời gian chờ là cần thiết cho iPad

— Con ve
nguồn
0

Vì trình duyệt tìm kiếm các trường loại mật khẩu, một cách giải quyết khác là bao gồm một trường ẩn ở đầu biểu mẫu của bạn:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— Kt Mack
nguồn
0

Tôi đã đọc rất nhiều chủ đề và thử rất nhiều đoạn mã. Sau khi thu thập tất cả những thứ đó, cách duy nhất tôi tìm thấy để dọn sạch các trường đăng nhập và mật khẩu và đặt lại nền của chúng thành màu trắng như sau:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Hãy bình luận, tôi đã mở tất cả các cải tiến nếu bạn tìm thấy một số.

— TwystO
nguồn
0

Tự động tắt hoàn toàn không được hỗ trợ bởi các trình duyệt hiện đại. Cách dễ nhất để giải quyết tự động hoàn thành mà tôi tìm thấy là một bản nhạc nhỏ với HTML và JS. Điều đầu tiên cần làm là thay đổi loại đầu vào trong HTML từ 'mật khẩu' thành 'văn bản'.

<input class="input input-xxl input-watery" type="text" name="password"/>

Tự động hoàn tất bắt đầu sau khi tải cửa sổ. Vậy là được rồi. Nhưng khi loại trường của bạn không phải là 'mật khẩu', trình duyệt không biết trường nào phải hoàn thành. Vì vậy, sẽ không có tự động hoàn thành trên các trường mẫu.

Sau đó, liên kết sự kiện tập trung vào trường mật khẩu, ví dụ: trong xương sống:

'focusin input[name=password]': 'onInputPasswordFocusIn',

Trong onInputPasswordFocusIn, chỉ cần thay đổi loại trường của bạn thành mật khẩu, bằng cách kiểm tra đơn giản:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Đó là nó!

CẬP NHẬT: điều này không hoạt động với JavaSciprt bị vô hiệu hóa

CẬP NHẬT năm 2018. Cũng tìm thấy một số mẹo vui. Đặt thuộc tính chỉ đọc cho trường đầu vào và xóa nó trong sự kiện tiêu điểm. Đầu tiên ngăn trình duyệt tự động điền các trường, thứ hai sẽ cho phép nhập dữ liệu.

— volodymyr3131
nguồn
Tự động hoàn thành là một phần của tiêu chuẩn, mặc dù cách sử dụng và triển khai có thể khác nhau. Ngoài ra, việc thay đổi các kiểu đầu vào trong IE thất bại một cách ngoạn mục, đó là lý do tại sao jQuery chặn nó, nhưng nói chung, đó không phải là ý tưởng hay nếu bạn có kế hoạch hỗ trợ IE developer.mozilla.org/en-US/docs/Web/Security/
— trộm
@casraf Xin lỗi, đây là một phần của standart, nhưng nó không hoạt động trong tất cả các trình duyệt hiện đại, vì vậy nó sẽ không làm điều mà nó được phát minh ra. Trong EDGE, nó hoạt động tốt, về các phiên bản trước không thể nói bất cứ điều gì (
— volodymyr3131
Đúng, nó không được thực hiện ở mọi nơi. Vấn đề vẫn còn tồn tại - tùy thuộc vào mức độ bạn muốn hỗ trợ IE bao xa - trước v 11, tôi không tin rằng bạn có thể thay đổi loại đầu vào. Nếu bạn không lo lắng về các phiên bản cũ, thì bạn cũng có thể sử dụng autocomplete=off, vì nó hoạt động trong FF, Chrome trong một thời gian và IE như phiên bản trước hoặc lâu hơn
— casraf
Tôi đã thử sử dụng autocomplete = off, cho cả đầu vào và biểu mẫu và Chrome vẫn điền dữ liệu đăng nhập và đăng nhập (. Đây chỉ là một loại phép thuật kỳ lạ, vì dựa trên các nhận xét, trong một số trường hợp, nó hoạt động và trong một số nó không =)
— volodymyr3131
Tôi biết, những tiêu chuẩn này không thực sự được tuân theo một cách nhất quán. Thật là xấu hổ, làm cho cuộc sống của chúng ta khó khăn hơn :(
— casraf
0

Vui lòng thử với autocomplete = "none" trong thẻ đầu vào của bạn

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

— Tamaya Tamari
nguồn
0

Tôi cũng phải thay đổi màu văn bản thành màu tối hơn (xem màu chủ đề tối của StackOverflow).

Vì vậy, kết thúc với sự kết hợp của giải pháp @ Tamás Pap, @MCBL và @ don's:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— Andrei
nguồn
-3

Tại sao không đặt điều này trong css của bạn:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Điều đó sẽ quan tâm đến vấn đề của bạn. Mặc dù nó gây ra vấn đề về khả năng sử dụng bởi vì bây giờ người dùng không thể thấy rằng biểu mẫu đã được tự động điền theo cách mà họ đã quen.

[sửa] Sau khi đăng bài này, tôi thấy rằng một câu trả lời tương tự đã được đưa ra và bạn đã nhận xét rằng nó không hoạt động. Tôi không hiểu tại sao bởi vì nó đã hoạt động khi tôi thử nghiệm nó.

— Kris
nguồn
không hoạt động trong cả chrome và safari. phong cách là input:-webkit-autofillvà input --webkit-autocompleteđơn giản là không tồn tại
— ruruskyi
@EliseuMonar: Tôi khá chắc chắn rằng mình không nói dối, nhưng không thể nhớ chi tiết về cách thức và nơi tôi đã thử nghiệm nó. Bản thân mã có thể được gõ từ bộ nhớ, không được sao chép / dán, vì vậy tự động hoàn thành so với tự động điền? Tôi không biết.
— Kris
-3

Vấn đề THỰC SỰ ở đây là Webkit (Safari, Chrome, ...) có lỗi. Khi có nhiều hơn một [biểu mẫu] trên trang, mỗi trang có [kiểu nhập = "văn bản" name = "foo" ...] (nghĩa là có cùng giá trị cho thuộc tính 'tên'), khi đó người dùng trả về đến trang, tự động điền sẽ được thực hiện trong trường đầu vào của [mẫu] FIRST trên trang, không phải trong [mẫu] đã được gửi. Lần thứ hai, [mẫu] TIẾP THEO sẽ được tự động điền, v.v. Chỉ [biểu mẫu] với trường văn bản đầu vào có tên CÙNG sẽ bị ảnh hưởng.

Điều này cần được báo cáo cho các nhà phát triển Webkit.

Opera tự động điền đúng [mẫu].

Firefox và IE không tự động điền.

Vì vậy, tôi nói lại: đây là một lỗi trong Webkit.

— Per Lindberg
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.