Środek zastępczy pola tekstowego wejściowego HTML

153

Jak wyśrodkować wyrównanie symbolu zastępczego pola wejściowego w formularzu HTML?

Używam następującego kodu, ale to nie działa:

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_
źródło
Niezupełnie jest to odpowiedź, ale jQuery Mobile to robi, więc możesz sprawdzić, jak to osiągają.
Evanss
Dla mnie twój kod działa, gdy pozbędziesz się input.placeholderbitu. Wyrównanie tekstu wewnątrz wejścia do środka powoduje również wyrównanie symbolu zastępczego.
Cannicide,

Odpowiedzi:

283

Jeśli chcesz zmienić tylko styl symbolu zastępczego

::-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
źródło
5
Działa to dobrze w przypadku większości pól wejściowych, ale nie w przypadku typu data. Czy wiesz, jak sprawić, by działało również na randkę?
Cornelius Parkin
92 
input{
   text-align:center;
}

to wszystko czego potrzebujesz.

Przykład roboczy w FF6. Ta metoda nie wydaje się być kompatybilna z różnymi przeglądarkami.

Twój poprzedni CSS próbował wyśrodkować tekst elementu wejściowego, który miał klasę „symbolu zastępczego”.

Jamie Dixon
źródło
5
Nie chcę wyśrodkować
symbolu
1
Tak. To właśnie robi ten przykład. Symbol zastępczy to tekst w polu.
Jamie Dixon
2
to nie działa w tym przykładzie. W tym przykładzie symbol zastępczy jest wyrównany do lewej.
max_
Uwaga, jeśli używasz bibliotek takich jak Bootstrap lub Semantic UI, musisz dodać styl w tekście, tj <input type="text" placeholder="Search..." style="text-align: right;">. Aby działał. Lub dodaj important!do swojej reguły CSS, jeśli używasz plików zewnętrznych.
Behdad
Wygląda na to, że Twój problem max_ jest po prostu problemem zgodności przeglądarki. Działa to dobrze w większości głównych przeglądarek z wyjątkiem Safari.
Cannicide,
7

Element zastępczy HTML5 może mieć styl dla tych przeglądarek, które akceptują ten element, ale na różne sposoby, jak widać tutaj: http://davidwalsh.name/html5-placeholder-css .

Ale nie wierzę, że text-alignzostanie to zinterpretowane przez przeglądarki. Przynajmniej w Chrome ten atrybut jest ignorowany. Ale zawsze można zmienić inne rzeczy, jak color, font-size, font-familyitd. Proponuję przemyśleć swój projekt, czy to możliwe, aby usunąć ten problem środkową.

EDYTOWAĆ

Jeśli naprawdę chcesz, aby ten tekst był wyśrodkowany, zawsze możesz użyć kodu jQuery lub wtyczki do symulacji zachowania symbolu zastępczego. Oto przykład: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

W ten sposób styl zadziała:

input.placeholder {
    text-align: center;
}
Erick Petrucelli
źródło
7

Możesz zrobić tak:

    <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>

Działający CodePen tutaj

Ian David Bocioaca
źródło
Tylko to działa dla mnie. Być może style dodane w HTML mają większy priorytet lub zastępują wszystkie inne style.
Gokul
5

Działa dobrze na moje potrzeby, powinieneś sprawdzić kompatybilność swojej przeglądarki, nie miałem problemów, ponieważ nie obchodziło mnie kompatybilność wsteczna

.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
źródło
3
Czy ta odpowiedź nie jest bezpośrednią kopią innej odpowiedzi?
Anwar
3

możesz również w ten sposób napisać css dla symbolu zastępczego

input::placeholder{
   text-align: center;
}
Ankit Jaiswal
źródło
2

Możesz spróbować tak:

input[placeholder] {
   text-align: center;
}
Rani Utami
źródło
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
źródło
0

Korzystając z poniższego fragmentu kodu, wybierasz symbol zastępczy w danych wejściowych, a każdy kod umieszczony w środku będzie miał wpływ tylko na symbol zastępczy. 

input::-webkit-input-placeholder {
      text-align: center
}
Brandon May
źródło
Ta odpowiedź nie wydaje się oferować niczego innego niż odpowiedź zaakceptowana .
Anton Menshov
Ta odpowiedź daje wskazówkę, jak zmienić symbol zastępczy tylko jednego określonego elementu, w przeciwieństwie do wszystkich symboli zastępczych. Np .foo::-webkit-input-placeholder { … }.
Henrik N
0

Możesz użyć set w klasie takiej jak poniżej i ustawić
CSS jako wpisywanie tekstu :

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

HTML:

<input type="text" class="place-holder-center">
Mohammad Daliri
źródło