it-swarm.it

Segnaposto Campo di testo di input HTML centrale

Come posso centrare l'allineamento del segnaposto del campo di input in un formato html?

Sto usando il seguente codice, ma non funziona:

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

Se si desidera modificare solo lo stile segnaposto

::-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; 
}
261
prarthana.m
input{
   text-align:center;
}

é tutto quello di cui hai bisogno.

Esempio di lavoro in FF6. Questo metodo non sembra compatibile con browser diversi.

Il tuo precedente CSS stava tentando di centrare il testo di un elemento di input che aveva una classe di "segnaposto".

82
Jamie Dixon

L'elemento segnaposto HTML5 può essere impostato per quei browser che accettano l'elemento, ma in modi diversi, come puoi vedere qui: http://davidwalsh.name/html5-placeholder-css .

Ma non credo che text-align sarà interpretato dai browser. Almeno su Chrome, questo attributo è ignorato. Ma puoi sempre cambiare altre cose, come color, font-size, font-family ecc. Ti suggerisco di ripensare il tuo design se è possibile rimuovere questo comportamento del centro.

MODIFICA

Se vuoi davvero centrare questo testo, puoi sempre usare del codice jQuery o un plugin per simulare il comportamento del segnaposto. Ecco un esempio: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

In questo modo lo stile funzionerà:

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

Funziona perfettamente per le mie esigenze, dovresti controllare la compatibilità per il tuo browser, non ho avuto problemi perché non mi interessava la compatibilità con le versioni precedenti

.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; 
}
6
Denis

Puoi fare così:

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

5

puoi usare anche in questo modo per scrivere css per segnaposto

input::placeholder{
   text-align: center;
}
1
Ankit Jaiswal
::-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;
}
0
Rudresh Bhatt

Puoi provare in questo modo:

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