[Snippet] schönere TextInput

phillip · Beitrag von **phillip** » 27.04.2007 00:46

Sooo, ich denke das passt hier rein, da es im weitesten Sinne ja etwas mit "Styling" zu tun hat

Ihr kennt ja wohl alle diese normalen, langweiligen, eckigen Inputfelder, in die man was reinschreiben kann

So habe ich mir gedacht, die ein bisschen zu umformatieren, --->siehe hier<---

Eigentlich ist das Prinzip recht simple, ich habe den Feldern lediglich einen background, padding, und das sonstige kleinzeugs (font-size, height, width etc.) gegeben.

@Mac User: Leider sind die Inputs so nicht Safari kompatibel, sie bleiben eckig.

Hier der lang ersehnte Quelltext:

Code: Alles auswählen

<style type="text/css">

p {color: white;}

body { background-color:black;}

#headerNicknameText, #headerPasswordText {  
	width: 143px;
	height: 25px;
	font-size: 11px;
	background-image: url(login_input_bg.png);
	background-repeat: no-repeat;
	border: none;
	background-color: transparent;
	overflow: hidden;
	margin: 0;
	padding: 5px 10px;
	color: #888;
}
#headerNicknameText:focus,
#headerPasswordText:focus,
#headerNicknameText.focus,
#headerPasswordText.focus {  
	background-image: url(login_input_focus_bg.png);
	color: #333;
}
</style>

<body>

<table>
<tr>
<td>
<p>Textfeld</p><input name="nickname" type="text" id="headerNicknameText" size="20" maxlength="60" />
</td>

<td>

<p>Passwort</p><input name="nickname" type="password" id="headerPasswordText" size="20" maxlength="60" />

</td>
</tr>
</table>

</body>

Bitte fügt aber das

Code: Alles auswählen

p {color: white;}

body { background-color:black;}

nicht in euer beständiges CSS File! es wäre ein grosser Fehler

Wenn ihr die Änderungen im CSS File vorgenommen habt, verseht alle Input felder, die ihr rund wollt mit

Code: Alles auswählen

id="headerNicknameText"

oder

Code: Alles auswählen

id="headerPasswordText"

Hier noch die beiden Images, die ihr in den images/ Ordner lädt:

[ externes Bild ]

[ externes Bild ]

Falls Fragen oder Kritiken auftauchen sollten, einfach posten

Viel Spass