-webkit-appearance equivalent in CSS3 and IE

Question

I've been looking for a good alternative for appearance:none for sometime. I need to have a checkbox which is required to look different.

Also I got to know that CSS3 would be dropping appearance, although major browsers support it now. So, what would be the better alternative for it If I intend to keep the checkbox and not to use button?

• IE equivalent to -webkit-appearance?
• MSDN | -webkit-appearance property
• css3 appearance property for IE
• CSS Appearance

Answer 1

You can try this

input[type="checkbox"].novisible {
    display: none;
}
.checkboxCl {
  border:1px solid #333;
  width:30px;
  height:30px;
  display:block;
}
input[type="checkbox"].novisible:checked + label {
  border:1px solid red;
  width:30px;
  height:30px;
  background:url("http://www.clker.com/cliparts/a/L/I/b/q/o/green-check-mark-hi.png") 0 0 no-repeat;
  background-size:cover;
}

   <input type="checkbox" class="novisible" id="checkBox">
   <label for="checkBox" class="checkboxCl"></label>

Answer 2

You could try the following. This is the link to the documentation.

your selector::-ms-check {
your styles
}

Answer 3

After a long search, I found out an alternate method for appearance property.

Easiest of all is making use of :after and :before and hiding the applied object.

Also, it is important to note that IE won't add any content if the property is a checkbox/radio button. Make sure to add a label and for that add :after or :before.