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;
Did you like this post?
Previous post
jQuery Bar Rating Plugin works by tranforming a standard select box into a rating widget. It’s only ~2kb minified and easy to style with CSS.
Next post
You want to use Bedrock to build WordPress websites together with Capistrano for deployment. No problem! Below you will find all the steps that will let you setup the Bedrock WP stack on Webfaction servers.