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

Als erforderlich definiert ist, in ein Formularfeld eingeben, wird Firefox 4 automatisch zeigt ein Roter Rahmen um dieses element, noch BEVOR der Nutzer auf den submit-button.

<input type="text" name="example" value="This is an example" required />

Ich denke, das ist störend für den Benutzer, wie er/Sie asn keine Fehler gemacht am Anfang.

Ich wnat, um zu verbergen, dass rot-Grenze für der erste Staat, aber zeigen es, wenn der Benutzer trifft die senden-Schaltfläche, wenn es ein Feld als erforderlich markiert.

Schaute ich :required und :invalid von neuen pseudo-Selektor, aber die änderungen sind für vor UND nach die Validierung. (aus Firefox 4 Benötigt die Eingabe-Formular ROTEM Rand/Umriss)

Gibt es eine Möglichkeit zum deaktivieren die rote Grenze, bevor der Benutzer das Formular sendet, und zeigen Sie es, wenn es einige fehlende Felder ?

InformationsquelleAutor der Frage Cyril N. | 2011-05-09

  1. 116

    Dieser war ein wenig schwierig, aber ich habe dieses Beispiel: http://jsfiddle.net/c5aTe/die für mich arbeiten. Im Grunde ist der trick scheint zu sein, immer mit dem Platzhalter-text, die ungültig ist. Ansonsten sollten Sie in der Lage, dies zu tun:

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

    oder etwas ähnliches...

    ABER seit FF4 beschließt, überprüfen Sie Ihre Platzhalter-text (keine Ahnung, warum...) die Lösung in der Geige (wenig hacky - verwendet !important) erforderlich ist.

    Hoffe, das hilft!

    BEARBEITEN

    Doh!! - Ich fühle mich wohl albern. Ich habe aktualisiert mein fiddle: http://jsfiddle.net/c5aTe/2/ - Sie können die :focus pseudo-Klasse zu halten, das element formatiert, wenn gültig, während der Benutzer Text eingibt. Dies wird auch noch rot hervorgehoben, wenn der Inhalt ungültig ist, wenn das Element den Fokus verliert, aber ich denke, es gibt nur so viel Sie tun können, mit der entworfenen Verhalten...

    HTH 🙂

    BEARBEITEN nach der Abnahme:

    Zusammenfassung der Beispiele auf OP - Anfrage (Hinweis: die ersten beiden sind nur für FF4 - nicht Chrome)

    1. Fix für FF überprüfen Sie Ihre Platzhalter text: http://jsfiddle.net/c5aTe/
    2. Fix für FF validieren, wie Sie Typ: http://jsfiddle.net/c5aTe/2
    3. JS-Lösung Umschalten von styles/Validierung: http://jsfiddle.net/c5aTe/4

    InformationsquelleAutor der Antwort lnrbob

  2. 28

    Als der Firefox 26, der eigentlichen CSS verwendet, um zu identifizieren, die ungültigen erforderlichen Felder ist wie folgt (kommt von Formularen.css):

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

    Replizieren in anderen Browsern, die ich benutze:

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

    Ich spielte mit den pixel Einstellungen, aber ich hätte nie geahnt das 1,5 px, ohne Blick auf moz-Quelle.

    Um es zu deaktivieren, die Sie verwenden können:

    input:invalid {
    box-shadow: none;
}

    InformationsquelleAutor der Antwort Dan

  3. 2

    Hier ist eine sehr einfache Lösung, die für mich gearbeitet. Ich im Grunde verändert das häßliche rot in einem sehr schönen blau, das ist die standard-Farbe für die nicht erforderlichen Felder, und eine web-übereinkommen:

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

    InformationsquelleAutor der Antwort Randy Greencorn

  4. 1

    Dies funktionierte gut für mich:

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

    InformationsquelleAutor der Antwort WVDominick

  5. 0

    Bitte versuchen Sie dieses,

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

    für Ihre form in Ihrem globalen .js-Datei oder im header-Abschnitt.

    InformationsquelleAutor der Antwort Anoop Velluva

Schreibe einen Kommentar