Jak ukryć ikonę autouzupełniania w polu wprowadzania danych

Question

Każde z moich pól wprowadzania ma ikonę małej osoby ze strzałką na safari. Jak mogę to wyłączyć? Przy okazji, mam inną podobną stronę i to się nie dzieje. Próbowałem wyłączyć wszystkie style w kontrolerze sieci, a jedna strona nadal zawiera ikonę. Więc nie wiem, czy to css czy html.

Answer 1

Jeśli chcesz go całkowicie ukryć, możesz użyć poniższych trików css. Zasadniczo wykrywa on "przycisk automatycznego uzupełniania kontaktów" i odsuwa go od pola wejściowego. Upewnij się, że masz "absolutną: pozycję", aby uniknąć dodatkowego wypełnienia pól.

input::-webkit-contacts-auto-fill-button { 
    visibility: hidden; 
    display: none !important; 
    pointer-events: none; 
    position: absolute; 
    right: 0; 
} 

Answer 2

pokrewne: Chciałem, aby dostosować pozycję kluczowego ikoną dla input[type="password"] ale nie mógł znaleźć selektor elementu pseudo wszędzie.

Więc sklonowany źródło WebKit i był w stanie go znaleźć :)

input::-webkit-credentials-auto-fill-button

Answer 3

Ukryj ikonę Safari autouzupełniania w polu Wprowadź hasło

::-webkit-credentials-auto-fill-button { 
    visibility: hidden; 
    pointer-events: none; 
    position: absolute; 
    right: 0; 
} 

Answer 4

Nie trzeba anulować wszystkie właściwości przycisków autouzupełniania.

Aby całkowicie ukryć ikony Safari, możesz także ukryć opakowanie .

Ponieważ ikony są oznaczone Shadow Content, DOM nie pokazuje tego, ale robi to cień DOM. Po prostu włącz przycisk "<>" w inspektorze.

Znajdziesz tam pojemnik owijania można kierować z css jak ten:

input::-webkit-textfield-decoration-container { 
    display: none; /* or whatever styling you want */ 
} 

Wewnątrz znajdziesz pęk kluczy hasłem i wskaźnik Caps-Lock:

input::-webkit-caps-lock-indicator { 
} 

input::-webkit-credentials-auto-fill-button { 
} 

Och, i gdy jesteś na tym, nie zapomnij IE z jego przejrzystymi przyciskami i ikonami hasła:

input::-ms-clear { 
} 

input::-ms-reveal { 
}