Center HTML Input Text Field Placeholder

153

¿Cómo puedo centrar la alineación del marcador de posición del campo de entrada en un formulario html?

Estoy usando el siguiente código, pero no funciona:

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_
fuente
Realmente no es una respuesta, pero jQuery Mobile hace esto, por lo que es posible que desee ver cómo lo logran.
Evanss
Para mí, su código funciona cuando se deshace del input.placeholderbit. Alinear el texto dentro de la entrada al centro también alinea el marcador de posición.
Cannicidio

Respuestas:

283

Si solo desea cambiar el estilo del marcador de posición

::-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
fuente
55
Esto funciona bien para la mayoría de los campos de entrada, pero no para la fecha de tipo. ¿Sabes cómo hacer que funcione también para la fecha?
Cornelius Parkin
92 
input{
   text-align:center;
}

es todo lo que necesitas.

Ejemplo de trabajo en FF6. Este método no parece ser compatible con todos los navegadores.

Su CSS anterior intentaba centrar el texto de un elemento de entrada que tenía una clase de "marcador de posición".

Jamie Dixon
fuente
55
Quiero centrar el marcador de posición, así como el texto ingresado en el campo
max_
1
Si. Esto es lo que hace este ejemplo. El marcador de posición es texto en el campo.
Jamie Dixon
2
No funciona en el ejemplo. En el ejemplo, el marcador de posición se deja alineado.
max_
Tenga cuidado, si está utilizando bibliotecas como Bootstrap o Semantic UI, debe agregar el estilo en línea, es decir, <input type="text" placeholder="Search..." style="text-align: right;">para que funcione. O agregue important!a su regla CSS si está utilizando archivos externos.
Behdad
Parece que el problema que tiene max_ es solo un problema de compatibilidad del navegador. Esto funciona bien en la mayoría de los principales navegadores, excepto Safari.
Cannicidio
7

El elemento de marcador de posición HTML5 se puede diseñar para aquellos navegadores que lo aceptan, pero de diferentes maneras, como puede ver aquí: http://davidwalsh.name/html5-placeholder-css .

Pero no creo que text-aligneso sea interpretado por los navegadores. Al menos en Chrome, este atributo se ignora. Pero siempre se puede cambiar otras cosas, como color, font-size, font-familyetc. Yo sugeriría que replantear su diseño sea posible eliminar este comportamiento centro.

EDITAR

Si realmente desea centrar este texto, siempre puede usar algún código o complemento jQuery para simular el comportamiento del marcador de posición. Aquí hay una muestra de ello: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html .

De esta manera el estilo funcionará:

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

Puedes hacer así:

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

Código de trabajoPen aquí

Ian David Bocioaca
fuente
Solo esto funciona para mí. Tal vez los estilos agregados en HTML tienen más prioridad o anulan todos los demás estilos.
Gokul
5

Funciona bien para mis necesidades, debe verificar la compatibilidad de su navegador, no tuve problemas porque no me importaba la compatibilidad con versiones anteriores

.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
fuente
3
¿No es esta respuesta una copia directa de otra respuesta?
Anwar
3

puedes usar también esta manera para escribir CSS para marcador de posición

input::placeholder{
   text-align: center;
}
Ankit Jaiswal
fuente
2

Puedes intentarlo así:

input[placeholder] {
   text-align: center;
}
Rani Utami
fuente
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
fuente
0

Al usar el fragmento de código a continuación, está seleccionando el marcador de posición dentro de su entrada, y cualquier código colocado dentro afectará solo al marcador de posición. 

input::-webkit-input-placeholder {
      text-align: center
}
Brandon May
fuente
Esta respuesta no parece ofrecer nada diferente en comparación con la respuesta aceptada .
Anton Menshov
Esta respuesta da una pista de cómo cambiar el marcador de posición de un solo elemento específico en lugar de todos los marcadores de posición. Por ej .foo::-webkit-input-placeholder { … }.
Henrik N
0

Puede usar set en una clase como la siguiente y set para ingresar la clase de texto
CSS:

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

HTML:

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