Centra segnaposto campo di testo input HTML

153

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

html css

— Max_
fonte

Non è proprio una risposta, ma jQuery Mobile lo fa, quindi potresti voler vedere come la raggiungono.

— Evanss,

Per me, il tuo codice funziona quando ti sbarazzi del input.placeholderbit. L'allineamento del testo all'interno dell'input al centro allinea anche il segnaposto.

— Cannicida,

283

Se vuoi cambiare 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; 
}

— prarthana.m
fonte

5

Funziona bene per la maggior parte dei campi di input, ma non per il tipo di data. Sai come farlo funzionare anche per data?

— Cornelius Parkin,

92

input{
   text-align:center;
}

é tutto quello di cui hai bisogno.

Esempio di lavoro in FF6. Questo metodo non sembra essere compatibile con più browser.

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

— Jamie Dixon
fonte

5

Non voglio centrare il segnaposto e il testo inserito nel campo

— max_11

1

Sì. Questo è ciò che fa questo esempio. Il segnaposto è il testo nel campo.

— Jamie Dixon,

2

non funziona nell'esempio. Nell'esempio, il segnaposto è allineato a sinistra.

— max_

Attenzione, se si utilizzano librerie come Bootstrap o Semantic UI, è necessario aggiungere lo stile in linea, ovvero <input type="text" placeholder="Search..." style="text-align: right;">affinché funzioni. Oppure aggiungi important!alla tua regola CSS se stai utilizzando file esterni.

— Behdad,

Sembra che il problema che stai riscontrando max_ sia solo un problema di compatibilità del browser. Funziona bene con la maggior parte dei browser tranne Safari.

— Cannicida del

7

L'elemento segnaposto HTML5 può essere disegnato 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-alignsarà interpretato dai browser. Almeno su Chrome, questo attributo viene ignorato. Ma si può sempre cambiare altre cose, come color, font-size, font-familyecc ti suggerisco di ripensare il vostro disegno sia possibile rimuovere questo comportamento centro.

MODIFICARE

Se vuoi davvero che questo testo sia centrato, puoi sempre usare un po 'di codice jQuery o 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;
}

— Erick Petrucelli
fonte

7

Puoi fare così:

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

Codice di lavoro Penna qui

— Ian David Bocioaca
fonte

Solo questo funziona per me. Forse gli stili aggiunti in HTML hanno più priorità o sovrascrivono tutti gli altri stili.

— Gokul,

5

Funziona bene per le mie esigenze, dovresti verificare la compatibilità per il tuo browser, non ho avuto problemi perché non mi importava della 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; 
}

— Denis
fonte

3

Questa risposta non è una copia diretta di un'altra risposta?

— Anwar,

3

puoi anche usare questo modo per scrivere CSS per segnaposto

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

— Ankit Jaiswal
fonte

2

Puoi provare così:

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

— Rani Utami
fonte

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
fonte

0

Utilizzando lo snippet di codice riportato di seguito, si seleziona il segnaposto all'interno dell'input e qualsiasi codice inserito all'interno influirà solo sul segnaposto.

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

— Brandon May
fonte

Questa risposta non sembra offrire nulla di diverso rispetto alla risposta accettata .

— Anton Menshov,

Questa risposta fornisce un suggerimento su come modificare il segnaposto di un solo elemento specifico rispetto a tutti i segnaposto. Es .foo::-webkit-input-placeholder { … }.

— Henrik N,

0

È possibile utilizzare set in una classe come di seguito e impostare per immettere la classe di testo
CSS:

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

HTML:

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

— Mohammad Daliri
fonte