Platzhalter für HTML-Eingabetextfeld zentrieren

153

Wie kann ich die Ausrichtung des Platzhalters des Eingabefelds in einem HTML-Formular zentrieren?

Ich verwende den folgenden Code, aber er funktioniert nicht:

CSS ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

HTML ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>
html css max_
quelle
Nicht wirklich eine Antwort, aber jQuery Mobile tut dies, sodass Sie vielleicht sehen möchten, wie sie es erreichen.
Evanss
Für mich funktioniert Ihr Code, wenn Sie das input.placeholderBit loswerden . Durch Ausrichten des Texts innerhalb der Eingabe zur Mitte wird auch der Platzhalter ausgerichtet.
Cannicide

Antworten:

283

Wenn Sie nur den Platzhalterstil ändern möchten

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}
prarthana.m
quelle
5
Dies funktioniert gut für die meisten Eingabefelder, jedoch nicht für das Typdatum. Wissen Sie, wie Sie es auch für Datum funktionieren lassen können?
Cornelius Parkin
92 
input{
   text-align:center;
}

ist alles, was du brauchst.

Arbeitsbeispiel in FF6. Diese Methode scheint nicht browserübergreifend kompatibel zu sein.

Ihr vorheriges CSS hat versucht, den Text eines Eingabeelements zu zentrieren, das eine Klasse von "Platzhalter" hatte.

Jamie Dixon
quelle
5
Ich möchte den Platzhalter sowie den in das Feld
eingegebenen
1
Ja. Dies ist, was dieses Beispiel tut. Der Platzhalter ist Text im Feld.
Jamie Dixon
2
Im Beispiel funktioniert es nicht. Im Beispiel ist der Platzhalter linksbündig ausgerichtet.
max_
Beachten Sie, dass Sie, wenn Sie Bibliotheken wie Bootstrap oder Semantic UI verwenden, den Stil inline hinzufügen müssen, <input type="text" placeholder="Search..." style="text-align: right;">damit er funktioniert. Oder fügen Sie important!Ihrer CSS-Regel hinzu, wenn Sie externe Dateien verwenden.
Behdad
Es sieht so aus, als ob das Problem, das Sie mit max_ haben, nur ein Problem der Browserkompatibilität ist. Dies funktioniert in den meisten gängigen Browsern außer Safari einwandfrei.
Cannicide
7

Das HTML5-Platzhalterelement kann für die Browser gestaltet werden, die das Element akzeptieren, jedoch auf unterschiedliche Weise, wie Sie hier sehen können: http://davidwalsh.name/html5-placeholder-css .

Aber ich glaube nicht, dass text-aligndas von den Browsern interpretiert wird. Zumindest in Chrome wird dieses Attribut ignoriert. Aber man kann immer andere Dinge ändern, wie color, font-size, font-familyusw. Ich schlage vor , Sie Ihr Design , ob möglich Umdenkens dieses Zentrum Verhalten zu entfernen.

BEARBEITEN

Wenn Sie diesen Text wirklich zentrieren möchten, können Sie jederzeit einen jQuery-Code oder ein Plugin verwenden, um das Platzhalterverhalten zu simulieren. Hier ist ein Beispiel davon: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

Auf diese Weise funktioniert der Stil:

input.placeholder {
    text-align: center;
}
Erick Petrucelli
quelle
7

Sie können so machen:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Working CodePen hier

Ian David Bocioaca
quelle
Nur das funktioniert bei mir. Möglicherweise erhalten in HTML hinzugefügte Stile mehr Priorität oder überschreiben alle anderen Stile.
Gokul
5

Es funktioniert gut für meine Bedürfnisse, Sie sollten die Kompatibilität für Ihren Browser überprüfen. Ich hatte keine Probleme, weil mir die Abwärtskompatibilität egal war

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}
Denis
quelle
3
Ist diese Antwort nicht eine direkte Kopie einer anderen Antwort?
Anwar
3

Sie können auch diese Methode verwenden, um CSS für Platzhalter zu schreiben

input::placeholder{
   text-align: center;
}
Ankit Jaiswal
quelle
2

Sie können Folgendes versuchen:

input[placeholder] {
   text-align: center;
}
Rani Utami
quelle
1 
::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
Rudresh Bhatt
quelle
0

Wenn Sie das folgende Codefragment verwenden, wählen Sie den Platzhalter in Ihrer Eingabe aus, und jeder darin platzierte Code wirkt sich nur auf den Platzhalter aus. 

input::-webkit-input-placeholder {
      text-align: center
}
Brandon May
quelle
Diese Antwort scheint nichts anderes zu bieten als die akzeptierte Antwort .
Anton Menshov
Diese Antwort gibt einen Hinweis darauf, wie der Platzhalter nur eines bestimmten Elements im Gegensatz zu allen Platzhaltern geändert werden kann. ZB .foo::-webkit-input-placeholder { … }.
Henrik N
0

Sie können set in einer Klasse wie unten verwenden und set eingeben, um die Textklasse
CSS einzugeben :

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">
Mohammad Daliri
quelle