input text mit css formatieren

[phillip]

Hallo
Ich hab hier etwas Interessantes bezüglich dem Formatieren von inputs gefunden.
Wenn ihr oben recht beim Login schaut, wird dem feld ein anderer Background hinzugefügt, so weit so gut.

Aber wie ist es möglich, wenn text drin steht, und man 'rausklickt', dass dies so bleibt?

wie wird dem feld gesagt, dass es bei text den background nicht wechseln soll?

hat dies was mit js zu tun?

bitte helft mir, ich will das auch xD

[gn#36]

Das dürfte sogar ohne JS gehen rein mit CSS. Wenn der Hintergrund fest ist geht es auf jeden Fall, bei moderneren Browsern (IE 6 nicht) kannst du mit den Pseudoklassen :active, :hover, :focus usw nicht nur bei Links arbeiten sondern auch bei anderen Elementen, so dass ich das hier auch mal ausprobieren würde. Wenn du gerade Text eingibst dürfte das Fenster den Fokus haben ansonsten nicht, das Bild kannst du dann per background-image: url(...); setzen.

[phillip]

gibts irgendwo eine komplette liste der Pseudoklassen?
Ja, dass der Hintergrund wechselt, beim hineinklicken hab ich.
Aber sobald ein text darin steht, und ich wieder rausklicke, ändert sich der background wieder in den ursprünglichen, sprich der text liegt über dem background, was nicht unbedingt schön ist

[Boecki91]

http://www.thestyleworks.de/ref/index_pc.shtml

[phillip]

vielen Dank

[phillip]

ok, ich hab jetzt

Code: Alles auswählen

input.password

und

Code: Alles auswählen

input.password:focus

logischerweise ist demnach die class="password"
aber sobald ich das text feld, mit text wieder verlasse, schaltet es wieder auf

Code: Alles auswählen

input.password

um, und bleibt nicht im

Code: Alles auswählen

input.password:focus

.

weiss jemand um Rat?

[gn#36]

Das geht dann wohl tatsächlich nur mit JS.
Du könntest da z.b. mit onFocus und onBlur arbeiten und "echten" Text reinschreiben, der mit einer Variablen verglichen wird und bei einem Klick auf das Feld dann ersetzt wird und wenn nichts eingegeben wurde wieder hinein.

Zugriff auf das Feld kannst du erhalten indem du ihm eine ID verpasst oder indem du einfach per document.forms.{name des forms}.{name des Elemets}.value darauf zugreifst.

[phillip]

nur kenn ich mich sozusagen 0 aus mit JS... xD
ich hab mir den Source Code schon mehrere Male genau angeschaut, von ID's ist bei den inputs nicht die Rede... Nur über alles gefasst:

Code: Alles auswählen

<div id="loginBar">

<form action="" method="post">
<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td valign="top"><input name="login_username" value="" type="text" class="username triggerFocus" /></td>
		<td valign="top" align="right">
			<input name="login_password" type="password" class="password triggerFocus" /><br />
			<span style="margin-right: 23px;"><a href="forgotpass"><font style="font-size: 9px;">Forgot Password?</font></a></span>
		</td>
		<td valign="top"><input type="image" name="login" value="login" src="assets/img/btn_login_nm.gif" /></form></td>

	</tr>
</table>
			</div>

Ich hab im css file auch angeschaut, dort ists relativ eigenartig gemacht:

Code: Alles auswählen

input.password {
	display: block;
	margin: 0 10px 0 0;
	padding: 2px 5px;
	font-size: 9px;
	background: url(cssimg/inputPassword_bg.gif) top left no-repeat;
	border: 1px solid #3a3b3b;
	width: 127px;
	height: 21px;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 115px;
	height: 15px;
	float: left;
	color: #b0b0b0;
	}
input.password-focus {
	display: block;
	margin: 0 10px 0 0;
	padding: 2px 5px;
	font-size: 9px;
	background: url(cssimg/inputSearchFocus_bg.gif) top left no-repeat;
	border: 1px solid #3a4d5c;
	width: 127px;
	height: 21px;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 115px;
	height: 15px;
	float: left;
	color: #000000;
	}

Dies ist alles...
und JS hab ich noch nichts gefunden...

[gn#36]

irgendwie sowas müsste es tun:

Code: Alles auswählen

onBlur="if(document.forms.{name des forms}.{name des Elemets}.value == ''){ document.forms.{name des forms}.{name des Elemets}.value = 'text';}" onFocus="if(document.forms.{name des forms}.{name des Elemets}.value == 'text') {document.forms.{name des forms}.{name des Elemets}.value = '';}"

Die Namen musst du natürlich noch entsprechend eingeben (das Form in dem die Elemente stehen muss einen Namen besitzen den du eingeben musst), getestet habe ich das jetzt nicht. Eigentlich sollte in dem Textfeld dann "text" erscheinen, wenn nichts drin steht wenn du das Feld verlässt und wenn du draufklickst und da steht "text" drin, sollte der verschwinden.