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 5/6. 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;
}

One Response to Remove default input styling from WebKit

  • September 27, 2013 at 11:31 am
    Oyvidn says:

    Thanks for the tip. Saved a noob like me from tearing his hear out when trying to find those pesky radio-buttons that suddenly disappeared :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>