AutoFill nie wyzwala zdarzenia zmiany w Chrome, a etykietę formularza użytkownika / hasła jest pokrywa się z wartością autofilowaną. Dołączona próbka obrazu.

Aktualne zachowanie: Musisz kliknąć wewnątrz formularza / aplikacji, aby aktywować wartość autofilla.

Textoverlap on chrome autofill

Szukałem różnych rozwiązań i przeszedłem przez wiele wątków na witrynę Bithub / Chromium Bugs, ale nie mógł znaleźć poprawki dla tego problemu. Wydaje się, że jest to błąd w Chrome, który nie został naprawiony z powodu pewnych problemów z bezpieczeństwem. Proszę zaproponować sposób na pokonanie tego problemu w kątowym.

0
nishedh 15 wrzesień 2020, 21:46

1 odpowiedź

Najlepsza odpowiedź

Znalazłem pewne możliwe rozwiązania dla nakładającego się problemu w poniższym łączem Github: https://github.com/baedda/floating-form-labels/issues/ 12.

Naprawiłem mój problem za pomocą czystego rozwiązania CSS:

HTML: -

<div>
    <input type="text" id="name" name="name">
    <label for="name" class="placeholder-label">Name</label>
  </div>

CSS: -

input:-webkit-autofill +  .placeholder-label {
    // your styles for floating label
    -webkit-transform: translate3d(5px,-52%,0);
    transform: translate3d(5px,-52%,0);
}
0
nishedh 16 wrzesień 2020, 11:29