Wie formatiere ich die HTML-Formularvalidierungsfehlermeldungen mit CSS?
Wie formatiere ich die HTML-Formularvalidierungsfehlermeldungen mit CSS?
Lesezeit: 2 Minuten
14459400cookie-checkWie formatiere ich die HTML-Formularvalidierungsfehlermeldungen mit CSS?
Kyle
Ramin
Derzeit gibt es keine Möglichkeit, diese kleinen Validierungs-Tooltips zu gestalten. Die einzige andere Option, für die ich mich entschieden habe, besteht darin, die Browservalidierung vorerst vollständig zu deaktivieren und mich auf meine eigenen clientseitigen Validierungsskripts zu verlassen.
Laut diesem Artikel:
http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
“Der einfachste Weg, sich abzumelden, besteht darin, die novalidieren Attribut zu Ihrem <form>. Sie können auch einstellen formvalidieren auf Ihre Submit-Steuerelemente.”
-
Eine weitere Referenz: developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…
– 1,21 Gigawatt
1. Juli 2019 um 17:14 Uhr
Estelle
Chrome bot bis Version 27 ein natives Erscheinungsbild für die Sprechblasen bei Validierungsfehlern. Die Fehlerblase besteht aus vier enthaltenden Elementen, die keine normativen Elemente sind. Diese vier Elemente können über Pseudoelemente gestaltet werden, die für separate Abschnitte der Blase gelten:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
Mit der Veröffentlichung von Chrome v28 wurden diese nicht standardmäßigen Selektoren entfernt: https://bugs.chromium.org/p/chromium/issues/detail?id=259050
-
Die Validierungsfehlerblasen von Chrome sehen für mich nicht nativ aus. Sie sehen so hässlich aus (vor Chrome 15).
– XP1
11. September 2011 um 10:41 Uhr
-
Wenn Sie diese auf display:none setzen, stürzt Chrome ab
– Peter Ehrlich
4. Februar 2012 um 7:35 Uhr
-
Ich habe einen Fehler für den Absturz geöffnet, siehe code.google.com/p/chromium/issues/detail?id=117746
– Ronny
11. März 2012 um 21:35 Uhr
-
Wenn Sie daran interessiert sind, dies in Firefox zu beheben, stimmen Sie bitte über den Fehler ab: bugzilla.mozilla.org/show_bug.cgi?id=845405
–Robin Winslow
26. Februar 2013 um 17:39 Uhr
Remixz
Verwenden Sie Pseudoselektoren, wie easwee sagte. Um beispielsweise das Formularelement grün zu machen, wenn es gültig ist, und rot, wenn es ungültig ist, gehen Sie folgendermaßen vor:
:invalid {
background: #ffdddd;
}
:valid{
background:#ddffdd;
}
Wenn Sie eine vollständige Referenz benötigen, gehen Sie zu Mozilla-Entwicklernetzwerk
-
Diese Antwort (wie bei allen anderen) scheint die Frage zu verfehlen. Die Frage ist nicht, wie die Formulareingabe basierend auf ihrem Validierungsstatus gestaltet werden soll. Die Frage ist, wie man die Fehlermeldungen formatiert, die vom Browser angezeigt werden, z “Bitte füllen Sie dieses Feld aus.” im Chrom.
– Phrogz
28. April 2011 um 3:46 Uhr
Ein erforderliches Feld ist ungültig, bis die richtige Eingabe erfolgt ist. Ein Feld, das nicht erforderlich ist, aber validiert ist, z. B. ein URL-Feld, ist gültig, bis Text eingegeben wird.
input:invalid {
border:solid red;
}
Für mehr Information http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx
