css for checkbox not working in Internet Explorer

input[type=checkbox]:before {
    content:"";
    display:inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-indent: -1px;
    color: transparent;
    opacity: 1;
    background-image: url('../lib/dist/images/checkbox_d87b252c.gif');
}

i have above css which i am using to change the background image of checkbox. However it does not seem to work in internet explorer, it works in chrome though.

Any ideas what i need to do to make it work in internet explorer?