✔ Text in HTML Textfeld mit CSS vertikal mittig zentrieren

[Vectormaster]

Guten Tag,
ich habe vor, auf meiner Homepage HTML Textfelder mit 21px höhe und 200px länge zu verwenden. Ich bin schon so weit das diese Maße stimmen. Nun würde ich gerne den Text in den Textfeldern 3 Leerzeichen einrücken und ihn vertikal mittig ausrichten. Ich habe schon im Forum und bei Google gesucht jedoch nichts wirklich brauchbares gefunden.

Im Anhang noch ein Bild zur erklärung...

Danke für Eure Antworten
Vectormaster

 

[Maik]

Hi,

sprichst du mit "Textfeld" von <input type="text">?

Standardkonforme Browser (FF,Opera,Safari,usw.) interpretieren für diesen Formularelementtyp anstelle von height auch die line-height-Deklaration, mit der sich grundsätzlich ein Elementinhalt vertikal zentrieren lässt.

Für den IE wäre da ein "Umweg" über die padding-Eigenschaft erforderlich, da er line-height bei diesem Elementtyp nicht unterstützt:

width:190px;
padding:5px;
border:1px solid #000;

mfg Maik

 

[Vectormaster]

Hi,
ja genau das meine ich. Danke für Deine schnelle Antwort werde’s gleich mal ausprobieren.

Also hab‘s ausprobiert und es geht danke für Deine Antwort!

Jetzt habe ich doch noch eine Frage:
Ich habe 2 Textfelder für ein Login - Formular. Ich habe in diese die Beschriftung hineingeschrieben (Benutzername und Password) die Inhalte lösche ich mit onfocus = „this.value=‘‘ „das geht so weit jedoch hätte ich es gerne, dass ich sobald man in das Passwordfeld klickt der Typ des Feldes auf Password geändert wird. Gibt es dafür möglichkeiten


MfG
Vectormaster

 

[Maik]

Ich habe 2 Textfelder für ein Login - Formular. Ich habe in diese die Beschriftung hineingeschrieben (Benutzername und Password) [...] jedoch hätte ich es gerne, dass ich sobald man in das Passwordfeld klickt der Typ des Feldes auf Password geändert wird. Gibt es dafür möglichkeiten

Besitzt das Passwort-Eingabefeld nicht das Attribut type="password"?

Ansonsten kann ich dir jetzt nicht folgen

mfg Maik

 

[Vectormaster]

Ja genau. Aber wie ändere ich das? Also es soll sich änder, wenn man in das Feld klickt. Dann soll aus einem normalen Feld ein „Passwordfeld“ mit type="password" werden.

 

[Maik]

Und wieso zeichnest du dieses input-Element nicht direkt als "Passwort"-Eingabefeld aus? Dafür gibt es ja schliesslich den type-Attributwert password.

mfg Maik

 

[Vectormaster]

Mh… dann müsste ich mir was neues einfallen lassen, denn ich habe vor, die Beschriftung der Felder in das Feld hinein zu schreiben (siehe Bild im Anhang).

 

[Maik]

Hab das so noch nie umgesetzt, und laut der JS-Spezifikation kann der Wert für die type-Eigenschaft der Formularelementobjekte nur ausgelesen, aber nicht geändert werden.

mfg Maik

 

[Vectormaster]

Also bedeutet das für mich das dass nicht geht

 

[Maik]

Dazu müsste anstelle von



das hier angezeigt werden




Eine Möglichkeit wäre, den Text in eine zweite Hintergrundbildvariante (grafik-normal.png) einzuarbeiten, und diese entsprechend zu tauschen:

input.password-normal { background:url(pfad/zur/grafik-normal.png); }
input.password-focus { background:url(pfad/zur/grafik-focus.png); }

<input name="Passwort" type="password" class="password-normal" onfocus="this.className='password-focus'">

Auf den Event

onblur="this.className='password-normal'"

sollte hier verzichtet werden, da ansonsten nach der Passwort-Eingabe und dem Verlassen des Eingabefeldes wieder das ursprüngliche Hintergrundbild angezeigt werden würde, was mit der erfolgten Passwort-Eingabe dann kurios aussehen / wirken dürfte.

Die standardkonformen Browser (FF, Opera, Safari, usw.) unterstützen hier auch:

input[type=password] { background:url(pfad/zur/grafik-normal.png); }
input[type=password]:focus { background:url(pfad/zur/grafik-focus.png); }

nur interpretieren die älteren IEs (bis Version 6) nicht den Attribut-Selektor [type=password], der IE7 zwar schon, dafür aber nicht die focus-Pseudoklasse, weshalb auch er das Hintergrundbild nicht tauschen würde, und ich dir aus diesem Grund hier eine Umsetzung mit JS vorschlage.

Persönlich würde ich aber die "Feld-Beschreibungen" außerhalb der Eingabefelder angeben

mfg Maik