Domanda CSS - casella di testo sottolineata trasparente - howto?

Question

Buongiorno

Domanda CSS veloce. Qualcuno conosce qualche css veloce per creare una casella di testo trasparente sottolineata? Fondamentalmente voglio che la casella di testo sia invisibile ad eccezione del bordo inferiore. Ne ho bisogno per funzionare normalmente. Devo solo rimuovere i bordi sinistro, destro e superiore e impostare lo sfondo su trasparente o altro? Qualche esempio di come farlo correttamente? Questa app è per IE7 se pertinente. Qualsiasi aiuto è sempre apprezzato.

Saluti, ~ ck a San Diego

Answer 1

Questo dovrebbe farlo:

input.myBox
{
    border: 0px solid #000000;
    border-bottom-width: 1px;
    background-color: transparent;
}

Testato in IE8 (modalità di compatibilità IE7)

Answer 2

Solo un suggerimento ... poiché le persone non saranno abituate a questo, potresti voler aggiungere una pseudoclass al passaggio del mouse per cambiare leggermente il colore quando l'utente passa il mouse sopra il campo, come ulteriore suggerimento visivo "suggerimento" di quello che sta succedendo.

Esempio:

input.myBox:hover
{
   border-color: #000066;
   background-color: #FFFFF7;
}