Checkbox Styling Bug

Chrome and Firefox will pretty much ignore checkbox styling but IE won't. If you wanna see this in action open this page in all three browsers. This is mostly fine because the original style of the checkbox is not bad. However, when you look at IE you might notice that you checkbox is looking weird.

Weird Looking Checkbox  :
Normal Looking Checkbox: 

After digging in my CSS, I found out that IE will respect the border and background-color styles for a checkbox while Chrome and Firefox won't. I had style like this specified:

input, textarea, select { border: 1px solid #ddd; background-color: white; }

IE applied this style to the checkbox and it ended up looking off. So I figured I can just add another css style to reverse it.

imput[type=checkbox] {border:none !important; background-color: inherit !important}

Problem solved, right? nope!! It turns out that with IE, you can't take it back. Once you apply style to the checkboxes borders or background-color you are screwed.

The only way I was able to solve this problem is by not applying the style in the first place. So I went back to my original CSS and changed it to:

input:not([type=checkbox]), textarea, select { border: 1px solid #ddd; background-color: white; }

Now my checkboxes look the same in Chrome, Firefox, and IE.

Hope this helps!