css - solo - text-transform capitalize not working

Haga que el valor de entrada sea mayúscula en CSS sin afectar el marcador de posición

Question

¿Hay alguna forma de que pueda convertir un valor de entrada en mayúscula sin tener el marcador de posición en mayúscula?

Parece que tengo uno o el otro. Preferiría hacer esto limpiamente simplemente usando CSS (JS último recurso).

Answer 1

Cada motor de navegador tiene una implementación diferente para controlar el estilo de placeholder . Use lo siguiente:

jsBin ejemplo.

input { 
    text-transform: uppercase;
}
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
::placeholder { /* Recent browsers */
    text-transform: none;
}

Huelga decir que esto solo funciona en navegadores que pueden manejar marcadores de posición. (IE9 / 10 +)