HTML5: input url mit CSS gestalten

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

• Teil 1: Das Required-Attribut
• Teil 2: Das Placeholder-Attribut
• Teil 3: Der Input-Typ email
• Teil 4: Der Input-Typ url

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

Auch das Bubble-Icon kann mit CSS verändert werden.

Live-Demo

Demo anse­hen (Funktioniert nur mit Chrome)

Dateien

• Alle Dateien als Zip-Archiv herunterladen
• index.html
• error.png
• error.psd
• valid.png
• invalid.png

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: 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!