web-dev-qa-db-de.com

Firefox 4 Erforderliches Eingabeformular ROTE Umrandung

Ich habe kürzlich ein HTML5-Plugin für jQuery entwickelt und ich habe Probleme beim Entfernen des roten Rahmens in den erforderlichen Feldern in der FF4-Beta.

Mir ist aufgefallen, dass FF diese Begrenzung in den erforderlichen Feldern anwendet und entfernt, wenn der Wert festgelegt ist. Das Problem ist, dass ich das value-Attribut verwende, um den Platzhalter attr in älteren Browsern zu emulieren. Daher brauche ich alle Eingänge mit dieser Funktion, um die rote Linie nicht anzuzeigen.

Sie können das Problem auf der Demo-Seite des plugins hier sehen

49
matmancini

Es gibt einige neue Pseudo-Selektoren für einige der neuen HTML5-Formularfunktionen, die Ihnen in CSS zur Verfügung stehen. Sie suchen wahrscheinlich nach :invalid. Die folgenden sind alle aus den MDC Firefox 4-Dokumenten :

  • Die :invalid-CSS-Pseudoklasse wird automatisch auf Elemente angewendet, deren Inhalt gemäß der Typeinstellung der Eingabe nicht überprüft wird

  • Die :-moz-submit-invalid-Pseudoklasse ist , Die auf die Schaltfläche zum Senden in Formularfeldern angewendet wird, wenn eines oder mehrere Formularfelder Nicht gültig sind. 

  • Die :required Pseudoklasse wird nun automatisch auf Felder angewendet, die das erforderliche Attribut angeben. Die :optional-Pseudoklasse wird auf alle anderen Felder angewendet. 

  • Die :-moz-placeholder-Pseudoklasse wurde Hinzugefügt, damit Sie Platzhalter-Text in Platzhaltern formatieren können.

  • Mit dem :-moz-focusring-Pseudo-Selector Können Sie das Erscheinungsbild eines -Elements festlegen, wenn Gecko der Ansicht ist, dass das -Element einen Fokus

97
jason

Um genauer zu sein, müssen Sie diesen Stil auf das Eingabesteuerelement anwenden.

input:invalid {
    box-shadow: none;
}
58
WVDominick

verwenden Sie diesen Code als schnelle und einfache Lösung

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

Referenz: - https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

35
Mo.

Wickeln Sie Ihre erforderliche input in ein form mit dem Attribut novalidate 

<form novalidate>
    <input required>
</form>
1
Andrew Luca

Bitte versuchen Sie dies, 

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

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

0
Anoop Velluva