css - texto - Tamaño de letra del marcador de posición mayor que 16px

tamaño de letra en css

Question

He leído un par de artículos sobre el estilo del marcador de posición de un campo de entrada usando ::-webkit-input-placeholder en HTML5. Funciona perfectamente, excepto por una cosa.

Si intento aumentar el tamaño de la fuente a un valor superior a 16px, el texto se "corta" en la parte inferior. Esto sucede independientemente de la altura y el relleno de la entrada en sí. ¿Alguien sabe una forma de evitar este problema, ya sea utilizando CSS puro o javascript?

He agregado una captura de pantalla de dos campos de entrada donde los marcadores de posición tienen un tamaño de fuente de 20px

Jsfiddle: https://jsfiddle.net/bvwdg86x/

Answer 1

La entrada y su marcador de posición deben tener estilos de fuente coincidentes

input {
    width: 400px;
    padding: 0 20px;
}

input,
input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
}

<input type="text" placeholder="My Cool Placeholder Text">

Answer 2

Los estilos de marcador de posición no cambiarán el tamaño de un campo de entrada y no afectarán su modelo de caja. Agregue el tamaño de fuente a su entrada para evitar que el marcador de posición se corte.

También puede considerar agregar estilos de marcador de posición para otros navegadores ...

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */

Answer 3

input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}

<input type="text" placeholder="My Cool Placeholder Text">