Make checkbox in chrome look like one in IE

Question

The checkbox in IE and chrome looks different.

Chrome

Answer 1

A really simple way is just to add -webkit-appearance: none;. But you will need to then style the checkbox to match what you want. Here is an example:

http://jsfiddle.net/tzdcbyc5/

.checkbox {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid #111;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.checkbox:checked {
    background: url(http://vignette3.wikia.nocookie.net/roblox/images/5/57/Very-Basic-Checkmark-icon.png/revision/latest?cb=20131125154354) no-repeat center center;
    background-size: 100%;
}