Was CSS wird von allen Browsern für styling ungültig <input type="email">s?

OK, also in HTML5-Browsern können Sie haben:

<input class="txt-box" type="email" name="email" rel="required" />

Wenn die E-Mail ist nicht im richtigen format bringt es eine rote box um ihn herum.

Meine Frage ist: was ist die CSS, die bestimmt, dass der Stil?

  • Danke @Paul, war nicht sicher, wie Sie Sie zu Wort die Frage.
  • hier ist die URL:jasonspickdesign.com/contact.php
  • Sie sind sehr willkommen, nicht sicher, ob ich es viel klarer, es ist eine komplizierte diejenigen.
InformationsquelleAutor Jason Spick | 2011-08-02
  1. 11

    Richtet sich nach dem browser. Dabei sollten Sie Ihre Basen: 

    input:invalid, input:-moz-ui-invalid {
    border:0;
    outline:none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

    Testen Sie den Effekt in einen konformen browser:

    input[type="email"] {
    border:0;
    outline:none;
    box-shadow:none;
}

    IE7-compliance erfordern würde:

    input.txt-box {
    border:0 !important;
    outline:none !important;
    box-shadow:none;
}

    https://developer.mozilla.org/en/CSS/%3Ainvalid

    Beispiel: http://jsfiddle.net/AlienWebguy/cUgW4/

    • das würde Stil seine Standard Zustand...nicht seine ungültigen Zustand.
    • Richtig, aber ich wusste nicht, könnten Sie wählen Formen, Bereichen wie, dass werde ich Stimmen Sie für die. Noch brauchen, um herauszufinden, ungültigen Zustand.
    • ja, das hat nichts tun. firbug zeigt der Stil, den ich Hinzugefügt, aber die rote Umrandung ist noch da.
    • Ich bin nicht zu sehen, es bro, selbst auf Firefox 2. Welchen browser benutzt du zum testen?
    • href="http://en.wikipedia.org/wiki/Firefox_2" >Firefox 2??
    • Ich bin mit firefox 5
    • ja FF5 ist HTML5-kompatibel, so input type="email" würde das nicht machen als ungültig. Check out Löffel-Browser für alte browser testen.
    • Ich denke, wenn Jason sagt "ungültig", meint er, das styling, die in Browsern wie Firefox 5 verwenden, wenn Sie geben Sie eine ungültige e-mail-Adresse in eine <input type="email">.
    • Ahhh, jetzt sehe ich Sie - ja ok, Es ist die box-shadow-Eigenschaft. Finden Sie in den aktualisierten code.
    • Das ist es! Danke Jungs
    • :invalid unterscheidet sich von :-moz-ui-invalid im Firefox zumindest. Der ehemalige gilt das styling - sofort sobald die Seite geladen wird. Letzteres wartet, bis der Benutzer eingegeben hat, etwas ungültig. Siehe developer.mozilla.org/en-US/docs/Web/CSS/....

    InformationsquelleAutor AlienWebguy
  2. 6

    Wenn Sie installieren das Firebug-extension im Firefox und es verwenden, um überprüfen Sie das Formularfeld in Frage, dass Sie werde in der Lage sein zu sehen, die CSS, dass Firefox intern verwendet es Stil. (Stellen Sie sicher, "Show User-Agent-CSS" angekreuzt ist in der Registerkarte "Stil" pop-up-Menü.)

    In Firefox 5 auf meinem Mac, es verwendet die folgenden CSS:

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

    Interessant, Sie verwenden box-shadow. Es war eine Frage auf Stack Overflow, die ich kürzlich sah, die erwähnte, dass die :-moz-ui-invalid - Selektor: finden Sie Stil HTML5-input-Typen, wenn die Validierung fehlschlägt.

    InformationsquelleAutor Paul D. Waite
Schreibe einen Kommentar