Remove default input styling from WebKit

WebKit automatically adds rounded corners and inset shadows to input elements. You may be tempted to remove the default styling with two prefixed properties:

input {
  -webkit-appearance: none;
  -webkit-border-radius: 0;

But, don’t do it!

Unless you want all checkboxes and radio buttons to be invisible in recent versions of Chrome and Safari + also look really bad on iOs as a side effect. A better way of resetting input element styling is to be specific about input type. For example:

input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;