Interazione con i campi di un form con CSS

Grazie al supporto da parte dei maggiori browser dei CSS Selectors versione 2.1, alcuni semplici effetti grafici possono essere proposti tramite fogli di stile in maniera leggera.

by Sergio Parilli

HTML

<div id="content">
  <form>
    <label for="name">Esempio di Text BOX</label><br />
    <input type="text" name="name" id="name" /> <br />
    <label for="msg">Esempio di Text AREA</label> <br />
    <textarea id="msg" name="msg"></textarea><br />
    <label for="control">Accetta la Privacy Policy</label>
    <input id="control" onchange="toggleStatus()" type="checkbox" />
    <input id="send" type="submit" value="Invia" name="send" />
  </form>
</div>

CSS

#content {width: 160px;}
#content textarea, #content input {
   background:#e0eee0; 
   color:#666; 
   border:1px solid #999;
   width: 160px;
}
#content input:focus, #content textarea:focus {
   border:1px solid #3C3; 
   background:#D9FFFF;
}
#content textarea:disabled, #content input:disabled {
   background:#D1D1D1; 
   color:#666; 
   border:1px solid #999;
}

JavaScript

$(document).ready(function() {
   toggleStatus();
});
function toggleStatus() {
    if ($('#control').is(':checked')) {
        $('#name').removeAttr('disabled');
        $('#msg').removeAttr('disabled');
        $('#send').removeAttr('disabled');
    } else {
        $('#name').val('');
        $('#msg').val('');
        $('#name').attr('disabled', true);
        $('#msg').attr('disabled', true);
        $('#send').attr('disabled', true);
    }
}