HTML checkbox - cross browser issue

问题

I have a input - checkbox nested in elements and it shows okay in FF and chrome, but appears differently in IE8/9. The below nested structure is required as it has lots of other elements in it as well, which I just removed for the sake of clarity.

http://jsfiddle.net/D47jL/1/

HTML:

<div class="fieldwrapper">
    <div class="field">
        <div id="acc">
            <label>
                <input type="checkbox"/>
            </label>
        </div>        
    </div>
</div>

CSS:

.fieldwrapper .field input,
{

    border: 1px solid #41403E;
}

.fieldwrapper .field input[type="checkbox"] 
{
    border: none;
}
#acc label input { border:0 none;}

The first 2 styles in css were written in the application long back and I can not modify it, as its used in a no. of places, I can only write new or modify the 3rd style. I would like the checkbox to appear in IE as it is in FF. I tried, but no luck, not sure, may be I am missing something very simple. So, would appreciate if someone can help on this.

IE9 screenshot of jsfiddle -

FF screenshot of jsfiddle -

回答1:

In Internet explorer 9/10/11 the checkboxes looks different from how they looks in Blink and Gecko browsers. There is no good way(that have good browser support) to style checkboxes but you can hide them and style another element to work as a checkbox.

Here is some examples using that "hack": CSSDECK CSS Checkbox-styles.

来源：https://stackoverflow.com/questions/20789083/html-checkbox-cross-browser-issue