Center HTML Input Text Field Placeholder

116

¿Cómo puedo centrar la alineación del marcador de posición del campo de entrada en un formulario html?Center HTML Input Text Field Placeholder

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>

Fuente

2011-09-11 max_

¿Puede mostrar el código HTML? – Will

Realmente no es una respuesta, pero jQuery Mobile lo hace así que es posible que desee ver cómo lo logran. – Evans

Para mí, su código funciona cuando se deshace del bit 'input.placeholder'. Alinear el texto dentro de la entrada al centro alinea también el marcador de posición. – IamGuest

219

Si desea cambiar sólo el estilo de 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; 
}

Fuente

2013-03-13 06:06:30

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 para la fecha? –

input{ 
    text-align:center; 
}

es todo lo que necesita.

Working example en FF6. Este método no parece ser compatible con varios navegadores.

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

Fuente

2011-09-11 21:44:50

Quiero centrar el marcador de posición, así como el texto ingresado en el campo –

Sí. Esto es lo que hace este ejemplo. El marcador de posición _es_ texto en el campo. –

no funciona en el ejemplo. En el ejemplo, el marcador de posición está alineado a la izquierda. –

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

Pero no creo que text-align sean interpretados por los navegadores. Al menos en Chrome, este atributo se ignora. Pero siempre puede cambiar otras cosas, como color, font-size, font-family etc. Le sugiero que reconsidere su diseño si es posible para eliminar este comportamiento central.

EDITAR

Si realmente quiere este texto centrado, siempre se puede utilizar un código de jQuery o plugin para simular el comportamiento de marcador de posición. Aquí hay una muestra de esto: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

De esta manera el estilo va a trabajar:

input.placeholder { 
    text-align: center; 
}

Fuente

2011-09-11 21:45:29

Funciona bien para mis necesidades, usted debe comprobar la compatibilidad de su navegador, No tuve problemas porque no me importó 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; 
}

Fuente

2015-07-03 13:37:53 Denis

¿No es esta respuesta una copia directa de otra respuesta? – Anwar

@Anwar nah, Usted acaba de experimentar Déjà vu – konzo

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

Working CodePen here

Fuente

2016-03-18 19:33:11

Solo que esto está funcionando para mí. Tal vez los estilos agregados en HTML reciban más prioridad o prevalezcan sobre todos los demás estilos. – 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; 
}

Fuente

2016-06-16 11:38:18

Usted puede tratar de esta manera:

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

Fuente

2017-10-15 13:45:18

Center HTML Input Text Field Placeholder

Respuesta

Cuestiones relacionadas