HTML5: input url 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 url

Analog zum Input-Typ email überprüft der Browser bei Formularfeldern des Input-Typs url, ob der Nutzer tatsächlich eine URL eingegeben hat. Ist dies nicht der Fall, so erscheint eine Valadation Bubble. Wie diese Blase mit CSS gestaltet werden kann, habe ich im Artikel über den Input-Typ email gezeigt. Im folgenden gebe ich noch ein Beispiel, in dem das Standard-Bubble-Symbol durch ein benutzerspezifisches ersetzt wird.

Bei­spiel

Input url tool tip
Auch das Bubble-Icon kann mit CSS verändert werden.

Live-Demo

Demo anse­hen (Funktioniert nur mit Chrome)

Dateien

HTML5-Code

<p>Website:</p>
<form>
	<input type="url" name="url" required placeholder="http://domain.tld/" style="width:200px;">
	<input type="submit" />
</form>

CSS3-Code

<style type="text/css">
::-webkit-validation-bubble-icon {display:none;}
::-webkit-validation-bubble-message:before {
	background:url(error.png) no-repeat 0 1px;
	content:"";
	display:inline-block;
	margin-right:5px;
	height:17px;
	width:17px;
}
::-webkit-validation-bubble-message {
	background-color:#62788d;
	background-image:-webkit-linear-gradient(#62788d 50%, #2c363f 100%);
	border:1px solid #21292c;
	-webkit-border-radius:8px;
	box-shadow:rgba(0,0,0,0.5) 0 1px 6px, inset #839fb7 0 1px 0px;
	color:#ececec;
	font:13px "Segoe UI",Arial,sans-serif;
	padding:8px 8px 6px;
	text-shadow:#334d64 0 -1px 0;
	top:-4px;
	-webkit-user-select:none;  
}
::-webkit-validation-bubble-arrow {
	background-color:#62788d;
	border:1px solid #21292c;
	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>

Ü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. Chris
    schrieb am 13. Dezember 2013 um 14:05 Uhr (#)

    Habe alle 4 Formulareigenschaften mit aktuellem Chrome getestet. Die Bubbles für URL- und E-Mail-Inputs funktioniert damit nicht mehr. Gibt es hier neue CSS-Eigenschaften, oder ist der Support hierfür generell ausgelaufen?

  2. schrieb am 14. Dezember 2013 um 13:16 Uhr (#)

    Chromes Unterstützung der (nicht-standardkonformen) Validation-Bubbles wurde mit dem Umstieg der Rendering-Engine von Webkit auf Blink entfernt.
    Eine individuelle Gestaltung der Validation-Bubbles ist daher mit reinem CSS nicht mehr möglich. Siehe chromium issue #259050

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>