Wśród innych pomocy tekstowych i wizualnych przy przesyłaniu formularza, po weryfikacji, koloruję moje pola wprowadzania na czerwono, aby zaznaczyć, że interaktywny obszar wymaga uwagi.
W przeglądarce Chrome (i dla użytkowników paska narzędzi Google Toolbar) funkcja automatycznego wypełniania zmienia kolor moich formularzy na żółty. Oto złożony problem: chcę, aby autouzupełnianie było dozwolone w moich formularzach, ponieważ przyspiesza logowanie użytkowników. Zamierzam sprawdzić możliwość wyłączenia atrybutu autouzupełniania, jeśli / kiedy pojawi się błąd, ale jest to złożone kodowania, aby programowo wyłączyć autouzupełnianie dla pojedynczego wejścia na stronie, na które ma to wpływ. Mówiąc prościej, byłby to duży ból głowy.
Aby więc uniknąć tego problemu, czy istnieje prostsza metoda powstrzymania Chrome przed ponownym kolorowaniem pól wprowadzania?
[edytuj] Wypróbowałem! ważną sugestię poniżej i nie przyniosła ona żadnego skutku. Nie sprawdziłem jeszcze paska narzędzi Google Toolbar, aby sprawdzić, czy atrybut! Important będzie działał w tym przypadku.
O ile wiem, nie ma innego sposobu niż użycie atrybutu autouzupełniania (który wydaje się działać).
źródło
Odpowiedzi:
Wiem, że w Firefoksie można użyć atrybutu autocomplete = "off", aby wyłączyć funkcję autouzupełniania. Jeśli to działa w Chrome (nie zostało przetestowane), możesz ustawić ten atrybut w przypadku napotkania błędu.
Można to zastosować zarówno do pojedynczego elementu
... jak również dla całego formularza
źródło
<%= simple_form_for @user, html: { autocomplete: 'off' } do |f| %>
Ustaw właściwość CSS outline na none.
W przypadkach, w których przeglądarka może również dodać kolor tła, można to naprawić za pomocą czegoś takiego
źródło
:focus { background-color: #fff; }
input[type=text], input[type=password], input[type=email], textarea, select { outline: none; }
to jest dokładnie to, czego szukasz!
źródło
input:-webkit-autofill, input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #FFF inset; }
Używając trochę jQuery, możesz usunąć styl Chrome, zachowując nienaruszoną funkcję autouzupełniania. Napisałem o tym krótki post tutaj: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/
źródło
Aby usunąć obramowanie ze wszystkich pól, możesz użyć:
*:focus { outline:none; }
Aby usunąć obramowanie dla wybranych pól, po prostu zastosuj tę klasę do wybranych pól wejściowych:
.nohighlight:focus { outline:none; }
Możesz oczywiście zmienić granicę, jak chcesz:
.changeborder:focus { outline:Blue Solid 4px; }
(Od Billa Beckelmana: Zastąp automatyczną ramkę Chrome wokół aktywnych pól za pomocą CSS )
źródło
Tak, byłby to duży ból głowy, który moim zdaniem nie jest wart zwrotu. Może mógłbyś trochę poprawić strategię interfejsu użytkownika i zamiast pokolorować pole na czerwono, możesz pokolorować obramowania na czerwono lub umieścić obok niego małą biurokrację (jak taśma „Ładowanie” Gmaila), która znika, gdy pudełko jest w środku skupiać.
źródło
Z jQuery to bułka z masłem:
Jeśli chcesz być bardziej selektywny, dodaj nazwę klasy dla selektora.
źródło
Moim zdaniem prostszy sposób to:
Użyj tego kodu:
źródło
Po zastosowaniu @Benjamina, jego rozwiązania, odkryłem, że naciśnięcie przycisku Wstecz nadal daje mi żółte podświetlenie.
Moim rozwiązaniem, aby w jakiś sposób zapobiec temu żółtemu podświetleniu, jest zastosowanie następującego javascript jQuery:
Mam nadzieję, że to pomoże każdemu!
źródło
To działa. Co najlepsze, możesz użyć wartości rgba (hack wstawiania box-shadow nie działa z rgba). To jest drobna modyfikacja odpowiedzi @ Benjamina. Używam $ (document) .ready () zamiast $ (window) .load (). Wydaje mi się, że działa lepiej - teraz jest znacznie mniej FOUC. Nie wierzę, że istnieją i wady używania $ (document) .ready ().
źródło
w dzisiejszych wersjach działa to również, jeśli zostanie umieszczone w jednym z dwóch wejść logowania. Napraw również problem z wersją 40+ i późnym Firefoksem.
źródło
To zadziałało świetnie, ale najprawdopodobniej utrzyma jednolitość w Twojej witrynie, więc będziesz chciał uwzględnić to również w swoim CSS dla obszarów tekstowych:
Dla większości może się to wydawać oczywiste, ale dla początkujących możesz również ustawić kolor jako taki:
źródło
Jeśli dobrze pamiętam,! Ważna reguła w arkuszu stylów dotycząca koloru tła danych wejściowych zastąpi autouzupełnianie paska narzędzi Google - prawdopodobnie to samo dotyczy Chrome.
źródło