Maak invoerwaarde in hoofdletters in CSS zonder de tijdelijke aanduiding te beïnvloeden

Is er een manier waarop ik een invoerwaarde in hoofdletters kan maken zonder de tijdelijke aanduiding in hoofdletters te maken?

Het lijkt erop dat ik de een of de ander krijg. Ik zou dit liever netjes doen door alleen CSS te gebruiken (JS laatste redmiddel).

voer hier de afbeeldingsbeschrijving in


Antwoord 1, autoriteit 100%

Elke browser-engine heeft een andere implementatie om de stijl van placeholderte beheren. Gebruik het volgende:

jsBin-voorbeeld.

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

Onnodig te zeggen dat dit alleen werkt in browsers die overweg kunnen met tijdelijke aanduidingen. (IE9/10+)


Antwoord 2, autoriteit 4%

Ik weet dat je zei dat het gebruik van JS een laatste redmiddel was, maar in dit geval is het waarschijnlijk effectiever en eenvoudiger (ook als je geen JS gebruikt, zal de waarde die wordt gepost op ‘submit’ niet in hoofdletters zijn), dus dit is misschien beter geen extra CSS nodig:

<input oninput="this.value = this.value.toUpperCase()" placeholder="Enter Drivers License #" />

Other episodes