Sono praticamente due domande:
- come far apparire il testo (maiuscolo/minuscolo)
- come trasformare i caratteri che vengono inseriti

Per la prima (apparire) si risolve con i CSS (e mi pare che lo hai gia` risolto)

Per la seconda (trasformare) si deve agire in altro modo:
Opzione 1: a livello di immissione dei caratteri (hai necessita` di JS)
Opzione 2: a livello di trasmissione dei dati da clilent a server (JS)
Opzione 3: a livello di ricezione dati da parte del server (progr. lato server)

Dato che non puoi essere sicuro che il browser abbia JS abilitato (a meno di altre condizioni), conviene che comunque implementi l'opzione 3.
Se vuoi che la cosa sia visibile per l'utente, puoi implementare una delle opzioni 1 o 2 (preferibilmente la 1).


Sposto la discussione in Javascript.