Ecco una piccola soluzione ad un problema piuttosto comune: mi hanno chiesto di trovare la soluzione più semplice possibile per selezionare tutte le INPUT di tipo TEXT e illuminarne lo sfondo con effetto glow di colore verde.
Sicuramente la necessità era quella di utilizzare esclusivamente codice CSS, senza jQuery, javascript o altro: tutto quello che serve è li, nel file CSS, senza bisogno di altro.
La compatibilità con i browser meno recenti non è stata affrontata, ma può essere facilmente risolta con Modernizr o altro di simile.
Non potevo, ovviamente, fare riferimento a tutte le input con:
input{
/* codice css */
}
Questo si può facilmente risolvere inserendo:
input[type=text]{
/* codice css */
}
Assegnamo alle input delle proprietà di base:
input[type=text]{
outline: none;
padding: 2px;
border: 1px solid #CCC;
}
Ora assegnamo il solito indigesto codice ad IE9 &
input[type=text]{
outline: none;
padding: 2px;
border: 1px solid #CCC;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;
}
Ora assegnamo un’ombra all’onmouseover:
input[type=text]:hover{
box-shadow: 0 0 5px #43d034;
border:1px solid #35bf26;
}
Et voilà, il gioco dovrebbe essere fatto!
