CSS: selezionare ed illuminare le textbox

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!

2 pensieri su “CSS: selezionare ed illuminare le textbox

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *