Reset input style for checkboxes to default in IE

Question

I have a CSS rule for input like this:

input {
    border: 1px solid black;
}

The problem is that checkboxes in IE (have tested on IE 8 and 9) and Opera also inherit this border and instead of showing the default style they show their custom mode for checkboxes with white background and black checks like this:

instead of the native style, like in Windows 7 with gradient-grey background and dark blue checks that are shown in Chrome and Firefox:

I would like to keep the border for the input-rule in the CSS, but I have a class called "checkbox" that I put on all checkboxes like this:

<input type="checkbox" class="checkbox" />

Is there any way to reset the border style with the .checkbox rule?

I have tried:

.checkbox {
    border: none;
}

which works in Opera to revert to the default style, but not in IE. I have also tried many different combinations of:

.checkbox {
    border: 1 none transparent;
}

but none of these seems to reset to the default style of the checkboxes in IE.

Is it possible to revert the default style for checkboxes in IE do without removing the border for the input-rule and instead use the .checkbox class?

Answer 1

In many browsers, it's not possible to reset the checkbox back to the default native style.

This is probably the reason why CSS resets generally do not include a rule to this effect:

input {
    border: 0;
}

The most compatible technique is to do this:

input[type="text"], input[type="password"] {
    border: 1px solid black;
}

and explicitly list every type of input you wish to style.

See: http://jsfiddle.net/EPpJ9/

This will work in IE7+ and all modern browsers.

You could also do this more neatly with the not() CSS3 pseudo-class, but that doesn't work in IE8, which is a deal breaker for me:

input:not([type="checkbox"]) {
    border: 1px solid black;
}

Answer 2

In case you are still wondering there is indeed a way to style checkboxes and have it work in most browsers including IE. And you only need some css and just a little javascript and jquery. Works in IE6+

First make your checkbox like this.. Only add a label element with the for element pointing to the id of the checkbox.

<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>

Next include some css:

#mycheckbox {
    display: none;
}

Draw your checkbox using your label control, here is one I made:

#mylabel {
     float: left;
     margin-top: 11px;
     background-color: #fff;
     border: 1px solid #000;
     display: block;
     height: 12px;
     width: 12px;
     margin-right: 10px;
     -webkit-border-top-right-radius: 20px;
     -webkit-border-bottom-right-radius: 20px;
     -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomright: 20px;
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
     background-position: left center;
}

You have to create a look for when the box is checked:

#mylabel.checked {
background-color: #808080;
}

Finally some jquery:

    $(document).ready(function () {
    $("#mycheckbox").change(function () {
       if ($("#mycheckbox").is(":checked")) {
        $("#mylabel").addClass("checked", "checked");
    } else {
        $("#mylabel").removeClass("checked");
    }})
    });

Don't forget to include the jquery libraries (put this in your head tag):

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Check out the fiddle to see it in action: fiddle