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 disappear in recent versions of Chrome and Safari and look really weird on iOs. A better way of resetting input element styling is to be specific about input type. For example:

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}