HTML5: input email und Validation Bubbles mit CSS gestalten

Diese Seite ist Teil einer Artikelserie, die sich mit der Gestaltung von HTML5-Formularen beschäftigt.

Update vom 14.12.2013: Mit dem Umstieg der Rendering-Engine von Webkit auf Blink unterstützt Chrome die (nicht-standardkonformen) Validation-Bubbles nicht mehr.
Eine individuelle Gestaltung der Validation-Bubbles ist daher mit reinem CSS nicht mehr möglich.

Der Input-Typ email

Neben dem required- und dem placeholder-Attribut bringt HTML5 mit Feldern vom Typ email (input[type="email"]) und url (input[type="url"]) weitere praktische Neuerungen mit. Moderne Browser führen bei Formularfeldern dieser beiden Typen bereits vor dem Versenden eine automatische Validierung durch und überprüfen, ob es sich bei der Eingabe des Nutzers auch tatsächlich um eine E-Mail-Adresse oder eine URL handelt. Bei einer fehlerhaften Eingabe informiert der Browser den Nutzer nach dem Klicken des Formular-Buttons in einer Info-Blase über das Problem.
Eine serverseitige Prüfung ist allerdings weiterhin nötig, beispielsweise um bösartige Skriptbasteleien zu erkennen. Die HTML5-Input-Typen ermöglichen es aber erstmals ohne weitere Scripte, Forminhalte vor dem Versenden auf ihre Richtigkeit hin zu überprüfen.

Darstellung der Infoblase

Wie man das Formularfeld mit CSS gestaltet, habe ich bereits in einem Artikel über das requi­red-Attri­but beschrieben. Dieser Text geht daher nur auf das Design der Infoblase ein. Die Info Bubble wird von den Browsern nicht konsistent dargestellt. Dass der Internet Explorer input-Typen überhaupt nicht unterstützt, überrascht sicher niemanden.

Info bubble in Chrome
Wird keine valide E-Mail-Adresse in das Formularfeld eingegeben, so signalisiert dies Chrome mit einer so genannten info bubble.
Info bubble in Firefox
Die info bubble unterscheidet sich von Browser zu Browser. Hier im Bilde: Firefox.

Infoblase mit CSS gestalten

Zumindest für Webkit-Browser (z. B. Chrome) kann mit folgenden CSS-Angaben das Aussehen der Infoblase verändert werden:

::-webkit-validation-bubble {}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}
::-webkit-validation-bubble-icon {}
::-webkit-validation-bubble-body {}
::-webkit-validation-bubble-text-block {}
::-webkit-validation-bubble-arrow-heading {}

Bei­spiele

Infoblase
Beispiel 1: Mit CSS kann die Infoblase optisch ansprechender gestaltet werden. In diesem Beispiel – der Quellcode findet sich weiter unten – zieht das Rot der Infoblase sofort die Aufmerksamkeit des Nutzers auf sich.
info bubble
Beispiel 2: Eine nicht ganz so aufdringliche Infoblase – ebenfalls mit CSS gestaltetet.

Live-Demos

Dateien

HTML5-Code

<p>E-Mail-Adresse:</p>
<form>
	<input type="email" name="email" required placeholder="name@domain.tld" style="width:200px;">
	<input type="submit" />
</form>

Beispiel 1: CSS3-Code

<style type="text/css">
::-webkit-validation-bubble-icon {display:none;}
::-webkit-validation-bubble-message {
	background-color:#d73e3e;
	background-image:-webkit-linear-gradient(#d73e3e 50%, #c12828 100%);
	border:1px solid #962222;
	-webkit-border-radius:8px;
	box-shadow:rgba(0,0,0,0.5) 0 1px 6px, inset rgba(255,51,46,0.8) 0 1px 0px;
	color:#ececec;
	font:13px "Segoe UI",Arial,sans-serif;
	padding:8px;
	text-shadow:#a12525 0 -1px 0;
	top:-4px;
	-webkit-user-select:none;  
}
::-webkit-validation-bubble-arrow {
	background-color:#d73e3e;
	border:1px solid #962222;
	border-right:none;
	border-bottom:none;
	display:inline-block;
	-webkit-box-shadow:none;
	left:30px;
	top:3px;
	height:13px;
	width:13px;	
}
::-webkit-validation-bubble-arrow-clipper {height:17px;}
</style>

Beispiel 2: CSS3-Code

<style type="text/css">
::-webkit-validation-bubble-icon {display:none;}
::-webkit-validation-bubble-message {
	background-color:#71645a;
	background-image:-webkit-linear-gradient(#71645a 50%, #4d4239 100%);
	border:1px solid #261913;
	-webkit-border-radius:8px;
	box-shadow:rgba(0,0,0,0.5) 0 1px 6px, inset #aaa4a0 0 1px 0px;
	color:#ececec;
	font:13px "Segoe UI",Arial,sans-serif;
	padding:8px;
	text-shadow:#231f1b 0 -1px 0;
	top:-4px;
	-webkit-user-select:none;  
}	
::-webkit-validation-bubble-arrow {
	background-color:#71645a;
	border:1px solid #261913;
	border-right:none;
	border-bottom:none;
	display:inline-block;
	-webkit-box-shadow:none;
	left:30px;
	top:3px;
	height:13px;
	width:13px;	
}	
::-webkit-validation-bubble-arrow-clipper {height:17px;}
</style>

Wei­ter zu Teil 4 die­ser Serie: Der Input-Typ url

Über den Autor

Marco Bardenheuer

Marco Bardenheuer: Auf skybeam.de schreibt Marco über Webentwicklung, Webdesign und Internetmarketing. Verpasse keine Neuigkeiten über User Experience Design, Web Development und die Startup-Szene: Folge Marco jetzt auf Google Plus!



2 Kommentare

  1. Stefan
    schrieb am 1. Juni 2012 um 13:58 Uhr (#)

    Hallo,

    erstmal herzlichen Dank für die ausführliche Anleitung, hervoragend dargestellt, hat mir schon sehr geholfen!

    Die Info-Bubbel wird bei mir allerdings nicht angezeigt, bzw.sehe ich nur den oberen Teil der Bubble der Rest ist unter dem nächsten Listenelement versteckt!
    Nutze jqtouch u. jquery denke das es hierbei irgendwo hackt.

    Hat jemand eine Idee zur Behebung?
    LG, Stefan

  2. schrieb am 2. Juni 2012 um 20:59 Uhr (#)

    Du könntest mal versuchen, der Info Bubble einen z-index zu geben:

    position:absolute;
    z-index:1;

    Hast du einen Link zu der entsprechenden Seite?

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit einem Sternchen markiert *




Du kannst folgende HTML-Tags benutzen:
<a href=""> <abbr title=""> <blockquote cite=""> <cite> <code> <em> <q cite=""> <strike> <strong>