CSS resets for HTML form widgets

basics.css

/*
 * Because by default, some widgets do not inherit font-family and font-size from their parents. 
 * Many browsers use the system default appearance instead. To make your forms' appearance consistent
 * with the rest of your content, we can add the following rules to our stylesheet:
 */

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

/*
 * Because each widget has their own rules for border, padding and margin, we give them the same 
 * size by using the box-sizing property:
 */
input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}