Firefox 4: czy istnieje sposób na usunięcie czerwonej obramowania w wymaganym formularzu?
Gdy wymagane jest zdefiniowane w polu formularza, Firefox 4 automatycznie wyświetla czerwoną ramkę do tego elementu, nawet przed naciśnięciem przycisku Wyślij.
<input type="text" name="example" value="This is an example" required />
Myślę, że jest to niepokojące dla użytkownika, ponieważ nie popełnił błędów na początku.
Chcę ukryć tę czerwoną ramkę dla stanu początkowego, ale pokazać ją, gdy użytkownik naciśnie przycisk Wyślij, jeśli brakuje pola oznaczonego jako wymagane.
Spojrzałem na :required i :invalid z nowego pseudo selektora, ale zmiany dotyczą przed i po walidacji. (od Firefox 4 wymaga formularza wprowadzania czerwona ramka / kontur )
Czy istnieje sposób, aby wyłączyć czerwoną ramkę przed wysłaniem formularza i pokazać ją, jeśli brakuje pól ?
5 answers
To było trochę trudne, ale ustawiłem tę exmaple: http://jsfiddle.net/c5aTe / który działa dla mnie. Zasadniczo wydaje się, że sztuczka polega na obejściu tekstu zastępczego, który jest nieprawidłowy. W przeciwnym razie powinieneś być w stanie to zrobić:
input:required {
box-shadow:none;
}
input:invalid {
box-shadow:0 0 3px red;
}
Ale ponieważ FF4 decyduje się zweryfikować Twój tekst zastępczy (Nie wiem dlaczego...) rozwiązanie w fiddle (little hacky - uses !important) jest wymagane.
Mam nadzieję, że pomaga!
EDIT
Doh!!- Czuję się głupio. Zaktualizowałem Moje skrzypce: http://jsfiddle.net/c5aTe/2/ - możesz użyć pseudo klasy :focus, aby utrzymać element w stylu poprawnym podczas pisania przez użytkownika. Będzie to nadal podświetlane na czerwono, jeśli zawartość jest nieprawidłowa, gdy przedmiot traci ostrość, ale myślę, że jest tylko tyle, co można zrobić z zaprojektowanym zachowaniem...
HTH:)
Edycja po akceptacji:
Podsumowanie przykłady na życzenie OP (Uwaga pierwsze dwa są przeznaczone tylko dla FF4 - nie dla Chrome)
- Fix dla FF http://jsfiddle.net/c5aTe/
- Fix dla walidacji FF podczas wpisywania: http://jsfiddle.net/c5aTe/2
- js solution przełączanie stylów/Walidacja: http://jsfiddle.net/c5aTe/4
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-01 10:50:53
Począwszy od Firefoksa 26, rzeczywisty CSS używany do identyfikacji nieprawidłowych wymaganych pól jest następujący(pochodzi z formularzy.css):
:not(output):-moz-ui-invalid {
box-shadow: 0 0 1.5px 1px red;
}
Do replikowania w innych przeglądarkach używam:
input:invalid {
box-shadow: 0 0 1.5px 1px red;
}
Bawiłem się ustawieniami pikseli, ale nigdy nie zgadłbym 1.5 px bez patrzenia na źródło moz.
Aby go wyłączyć, możesz użyć:
input:invalid {
box-shadow: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-18 00:21:44
Oto bardzo proste rozwiązanie, które zadziałało dla mnie. W zasadzie zmieniłem brzydki czerwony na bardzo ładny niebieski, który jest standardowym kolorem dla pól niewymaganych, i Konwencję internetową: {]}
:required {
border-color: rgba(82, 168, 236, 0.8);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-14 05:52:15
To mi dobrze wyszło:
input:invalid {
-moz-box-shadow: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-11 07:30:50
Proszę spróbować tego,
$("forma").attr ("novalidate", true);
Dla Twojej formy w Twojej globalnej .plik js lub w sekcji nagłówka.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-19 07:27:58