17 October 2010 HowTo, HTML, Input, Style Robert Muehsig

imageAb und an komme ich auch in den Genuß mich mit der Grundmaterie des Webs auseinanderzusetzen: HTML. Ich hab mich gefragt, wie Google es geschafft hat, zwei Styles in einem Input-Feld zu mixen. Eigentlich ist es einfach...

Zwei Styles - "eine” Input Box:

image

"Autocomplete” Textboxen sind ja alt, aber ein Detail ist bei Google noch ganz nett umgesetzt: Mein Suchwort "Tel" (schwarze Buchstaben) wird mit dem ersten Ergebnis quasi fortgeführt (der ausgegraute Text). Wie geht das?

Html Input Felder - nur 1 Style

Ein HTML Input Feld kann man stylen wie man lustig ist, allerdings kann man nicht verschiedene Schriftfarben in einem Feld mixen.

Der Trick

Da das HTML von Googles Startseite etwas komplexer ist, hab ich im Internet etwas rumgeschaut wo es was ähnliches gibt: YouTube Instant (ich glaub der clevere Entwickler arbeitet nun auch bei YouTube/Google ;) ) - weniger komplex und von dort hab ich mal die Input-Box nachgebastelt:

image

Es sind zwei Input Element übereinander. Der eine mit dem Textvorschlag ist grau und die eigentliche Suchbox ganz normal mit schwarzen Text.

image

Hier das komplette HTML:

<html>
<head> 

<style>
#searchBox {width:570px;float:right;border:1px solid #A2BFF0;}
#grayText, #search{
	background:none;
	position:absolute;
	width:540px;
	height:30px;
	z-index:100;
	padding-left:5px;
	
}
#queryBox {height:30px;}
#grayText {z-index:0;color:#C0C0C0;}
</style>
</head>
<body>
	<div id="searchBox">
		<input type="text" id="grayText" disabled="disabled" autocomplete="off" value="Das ist der Suchtext" size="60">
		<input type="text" autocomplete="off" id="search" value="Das ist der" size="60" name="q">
	</div>
</body>
</html>

Jetzt versteh ich auch wie die Masked Input jQuery Plugins funktionieren (also vielleicht - nachgeschaut habe ich nicht) : image

Für alle HTML / CSS / Javascript Experten die über den Post nur müde lächeln können: Wie das vorher genau funktionierte war mir echt nicht bewusst - bin doch meistens nur im Backend mit .NET unterwegs. ;)


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!