Campo HTML Testo di input Campo segnaposto

116

Come si può centrare l'allineamento del segnaposto del campo di input in formato html?Campo HTML Testo di input Campo segnaposto

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>

fonte

2011-09-11 max_

Potete mostrare il codice HTML? – Will

Non proprio una risposta, ma jQuery Mobile fa questo, quindi potresti voler vedere come lo realizzano. – Evans

Per me, il tuo codice funziona quando ti sbarazzi del bit 'input.placeholder'. Allineare il testo all'interno dell'input al centro allinea anche il segnaposto. – IamGuest

219

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

fonte

2013-03-13 06:06:30

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

input{ 
    text-align:center; 
}

è tutto ciò che serve.

Working example in FF6. Questo metodo non sembra compatibile con browser diversi.

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

fonte

2011-09-11 21:44:50

Non voglio centrare il segnaposto così come il testo inserito nel campo –

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

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

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

Ma non credo che il 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 progetto se è possibile rimuovere questo comportamento centrale.

EDIT

Se si vuole veramente questo testo centrato, si può sempre usare un po 'di codice jQuery o plugin per simulare il comportamento segnaposto. Eccone 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; 
}

fonte

2011-09-11 21:45:29

Funziona bene per le mie esigenze, si dovrebbe verificare la compatibilità per il 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; 
}

fonte

2015-07-03 13:37:53 Denis

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

@Anwar nah, stai vivendo solo Déjà vu – konzo

Si può fare in questo modo:

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

fonte

2016-03-18 19:33:11

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

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

fonte

2016-06-16 11:38:18

si può provare in questo modo:

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

fonte

2017-10-15 13:45:18

Campo HTML Testo di input Campo segnaposto

risposta

Problemi correlati