web-dev-qa-db-fra.com

Rendre la valeur d'entrée en majuscule en CSS sans affecter l'espace réservé

Existe-t-il un moyen de mettre une valeur d'entrée en majuscule sans rendre l'espace réservé en majuscule?

On dirait que je reçois l'un ou l'autre. Je préfère le faire proprement en utilisant simplement CSS (JS en dernier recours).

enter image description here

46
kaleazy

Chaque moteur de navigateur a une implémentation différente pour contrôler le style placeholder. Utilisez le suivant:

exemple jsBin.

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

Inutile de dire que cela ne fonctionne que dans les navigateurs qui peuvent gérer les espaces réservés. (IE9/10 +)

92
Sander Koedood