Środek zastępczy pola tekstowego wejściowego HTML

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="support@socialpic.org" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

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

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

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

Możesz zrobić tak:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Działający CodePen tutaj

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

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

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

Możesz spróbować tak:

input[placeholder] {
   text-align: center;
}

::-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;
}

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
}

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