Form BoilerPlate CSS

With three given layers of feedback, this is a CSS boilerplate for form inputs.

by Frank Taylor

HTML

<form>
  <input type="email" name="email" class="required">
  <label for="email">email</label>
  
  <input type="text" name="name" class="required">
  <label for="name">Name</label>
  
  <input type="text" name="phone">
  <label for="phone">Phone</label>
  
  <input type="radio" name="radio">
  <input type="radio" name="radio"/>
  <input type="radio" name="radio"/>
  <label for="radio">Radio options</label>

<select ="selection" class="required">
    <option>Item one</option>
    <option>Item Two</option>
    <option>Item Three</option>
    <option>Item Four</option>
</select>
<label for="selection">Options</label>
<textarea name="comment"></textarea>
<label for="comment">Comment</label>

<input type="submit" value="send">
</form>

CSS

@font-face {
    font-family: 'Arvo';
    font-style: normal;
    font-weight: normal;
    src: local('Arvo'), url('http://themes.googleusercontent.com/static/fonts/arvo/v4/BM-nqL-L5PgjKPDNaleWB_esZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

/*
Form Boilerplate v1.0
Author:       Frank M. Taylor. 
HTML Notes:   This form boiler plate assumes that the label appears after the input field. This allows us to use the ~ sibling selector with the fields' dynamic pseudo classes to bold a label when the user is typing. 
References:   My blog post: http://blog.frankmtaylor.com/2011/12/04/layering-the-feedback-with-css/;
Usage:        This uses object-oriented CSS. Shape and position elements as you see fit. 
              
        
*/
body{
    font-size: 1em;
    color: #444;
    background: #fff;
    font-family: "Arvo",
  }
/*FORM RESET */
  input, textarea, select, option, button, label{
    border: none;
    outline: none;
    background:none;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
  /* DYNAMIC PSEUDO CLASES */
  form *:hover, form *:active, form *:focus{
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

  /*SHAPE and position THE ELEMENTS */
  form, label{
    width: 30em;  
}
  input, textarea, select {
    width: 19em;
    padding:0 .5em;
    margin: 1em 0;
}
  input, select{
    height: 2em;
}
  input[type="radio"]{
    width: 1.5em;
    display:inline;
    margin: 0 1.5em 1em .5em;
    height: 1.5em;
}
  input[type="radio"] + input[type="radio"]{
    width: 1.5em;  
}
  textarea{
    height: 8em;
    max-width: 80%;
}
  label{
    height: 1em;
    display:block;
    position:relative;
    bottom:3.25em;
}
  textarea +  label{
    bottom: 7.25em;  
}
  select + label{
    bottom: 3.25em;
}

  form:hover input.required + label:after,
  form:hover...