Firefox 4: Gibt es eine Möglichkeit, den roten Rand in einer erforderlichen Formulareingabe zu entfernen?


52

Wenn erforderlich in einem Formularfeld definiert ist, zeigt Firefox 4 automatisch eine rote Umrandung zu diesem Element, sogar bevor der Benutzer die Übermittlungsschaltfläche drückt.

Ich denke, das ist für den Benutzer störend, da er/sie am Anfang keine Fehler gemacht hat.

Ich möchte diesen roten Rahmen für den Anfangszustand verbergen, aber es zeigen, wenn der Benutzer die Schaltfläche Senden drückt, wenn ein fehlendes Feld als erforderlich markiert ist.

schaute ich auf :required und :invalid von neuem Pseudo-Selektor, aber die Änderungen sind für vor und nach die Validierung. (von Firefox 4 Required input form RED border/outline)

Gibt es eine Möglichkeit, den roten Rahmen zu deaktivieren, bevor der Benutzer das Formular absendet, und es anzuzeigen, wenn einige Felder fehlen?

+1

Wie wäre es mit einem Umriss: 0; ? 19 mai. 142014-05-19 14:20:12

104

Das war ein wenig schwierig, aber ich habe diese exmaple eingerichtet: http://jsfiddle.net/c5aTe/ die für mich arbeitet. Im Grunde scheint es, als ob der Trick darin besteht, Platzhaltertext zu haben, der ungültig ist. Andernfalls sollten Sie in der Lage sein, dies zu tun:

input:required { 
    box-shadow:none; 
} 
input:invalid { 
    box-shadow:0 0 3px red; 
} 

oder etwas ähnliches ...

ABER da entscheidet FF4 Ihren Platzhalter-Text zu bestätigen (keine Ahnung, warum ...) die Lösung in der Geige (kleiner Hacky - verwendet !important) ist erforderlich.

Hoffe, dass hilft!

EDIT

Doh !! - Ich fühle mich gut dumm. Ich habe meine Geige aktualisiert: http://jsfiddle.net/c5aTe/2/ - Sie können die Pseudoklasse :focus verwenden, um das Element so zu gestalten, als wäre es gültig, während der Benutzer tippt. Dies wird noch in rot markieren, wenn der Inhalt ungültig ist, wenn das Element des Fokus verliert, aber ich denke, es gibt nur so viel Sie mit dem entworfenen Verhalten tun können ...

HTH :)


EDIT nach Annahme:

Zusammenfassung der Beispiele bei OP Antrag (beachten Sie die ersten beiden sind nur für FF4 entworfen - nicht Chrome)

  1. Fix für FF Validieren Sie Ihre Platzhalter Text: http://jsfiddle.net/c5aTe/
  2. Fix für FF Validierung während des Tippens: http://jsfiddle.net/c5aTe/2
  3. JS Lösung Makeln Stile/Validierung: http://jsfiddle.net/c5aTe/4
  0

Großer Durchbruch, aber der "ungültige" Fehler scheint gezeigt zu werden, wenn der Benutzer auf die Eingabe klickt => wenn die Eingabe leer ist, BEVOR er tatsächlich etwas schreibt. Aber was ich will, ist ein Fehler in FF4, der nicht gelöst werden kann:/ 31 mai. 112011-05-31 15:51:57

  0

Aber +1 für deinen Weg, den schrecklichen roten Kastenschatten einzuschränken :) 31 mai. 112011-05-31 15:52:52

  0

Glaub nicht, dass du das tun kannst, weil es seltsamerweise fast ist * zu * clever und validiert im laufenden Betrieb. Sie könnten mit etwas zusätzlichem Javascript clever sein, das eine Klasse aus dem Formular hinzugefügt oder entfernt hat, wenn es gesendet wird. Dann könnten Sie alle Validierungshervorhebungen überschreiben, die darauf beruhen, dass diese Klasse vorhanden ist oder nicht. Schön daran ist, dass es immer noch die native Validierung verwendet, die nicht so schön ist, erfordert zusätzliche js ...: | 31 mai. 112011-05-31 16:00:36

+1

hatte etwas Inspiration beim Frühstück - oben hinzugefügt! 01 jun. 112011-06-01 06:38:57

  0

Clever! : p Aber wenn Sie einen Blick werfen, haben Sie den Schatten für den ursprünglichen Zustand und den Kasten Schatten für den ungültigen Zustand. Beide sind gezeigt. Ich beginne zu glauben, dass dies ein Fehler von Mozilla ist, sie haben nicht über den Ausgangszustand nachgedacht. Wenn das korrekt ist und niemand anderes einen komplett funktionierenden Weg hinzufügt, werde ich deine Antwort nicht akzeptieren, aber ich werde dir das Kopfgeld geben (hoffe das ist möglich, wenn nicht, werde ich deine Antwort akzeptieren). Du verdienst es :) Danke für deine Hilfe! 01 jun. 112011-06-01 07:29:22

  0

danke für den Kommentar :). Nur um zu überprüfen - schauen Sie auf die zweite Geige? Ich erhalte nur einen Schatten, wenn ich einen ungültigen Inhalt eingegeben habe - nicht während der Eingabe und nicht vorher. Es wird kein Standardschatten angezeigt - es sollte durch die erste css-Deklaration entfernt werden. Ich bin jetzt neugierig, warum wir unterschiedliche Ergebnisse sehen ... Zusätzlich habe ich eine mögliche Javascript-Lösung (mit Dirty Inline-Funktionen) mit zwei Beispielen verspottet: http://jsfiddle.net/c5aTe/4/ 01 jun. 112011-06-01 10:20:32

  0

Nun, ich Wissen Sie, was das zweite Spiel für mich nicht funktionierte ... Ich habe es auf Chrome getestet (Schande über mich). Aber das enthüllt ein anderes Problem (für eine andere Frage dann): Warum ist das Problem jetzt auf Chrome: p Nun, Sie verdient das Kopfgeld und die akzeptierte Antwort, da es jetzt für FF funktioniert! Könntest du deine Antwort mit der zweiten Frage und der letzten, die du vorgeschlagen hast, aktualisieren, funktionieren beide großartig (eine nur in FF, die zweite in beiden mit JS). Es könnte anderen Benutzern helfen, das gleiche Problem zu haben. Nochmals vielen Dank :) 01 jun. 112011-06-01 10:29:29

  0

(Ich kann nur die Prämie in 56 Minuten vergeben ... Sie müssen warten;)) 01 jun. 112011-06-01 10:30:00

  0

Woot - zu meiner Antwort hinzugefügt, wie Sie vorgeschlagen. :) 01 jun. 112011-06-01 10:54:11

  0

Danke! Noch 31 Minuten ...: p 01 jun. 112011-06-01 10:55:22

  0

Ich musste nur tun: wählen [erforderlich] { box-shadow: keine! wichtig; } 04 jan. 132013-01-04 20:06:04


0

Das funktionierte gut für mich:

input:invalid { 
    -moz-box-shadow: none; 
} 
+4

Das Problem hier ist, dass nach der Überprüfung der Box-Schatten zu keiner bleibt und der Benutzer keine Ahnung hat, wo die Fehler auftreten. Was ich will, ist, den roten Rahmen NICHT im normalen Zustand des Formulars anzuzeigen, sondern es anzuzeigen, wenn der Benutzer das Formular abschickt/verwischt, wenn ein Fehler vorliegt. 31 mai. 112011-05-31 11:33:24


2

Hier ist eine sehr einfache Lösung, die für mich gearbeitet.Ich änderte im Grunde die hässlichen rot in eine sehr schönes blau, die die Standardfarbe für nicht benötigten Felder ist, und eine Web-Konvention:

:required { 
    border-color: rgba(82, 168, 236, 0.8); 
} 

24

Ab Firefox 26, die tatsächlichen CSS verwendet, um ungültige erforderlichen Felder zu identifizieren wie folgt (von forms.css kommt):

:not(output):-moz-ui-invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

in anderen Browsern zu replizieren, die ich benutze:

input:invalid { 
    box-shadow: 0 0 1.5px 1px red; 
} 

ich spielte mit den Pixeln Einstellungen, aber ich würde nie die 1 erraten hat. 5px ohne auf moz Quelle zu schauen.

es zu deaktivieren, können Sie:

input:invalid { 
    box-shadow: none; 
} 

0

Bitte versuchen Sie dies,

$ ("Form") attr ("novalidate", true);.

für Ihr Formular in Ihrer globalen .js-Datei oder im Header-Abschnitt.