Css3 Appearance Property for Ie

webkit-appearance equivalent in CSS3 and IE

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>

IE equivalent to -webkit-appearance?

By simply Googling "CSS appearance MDN" we get

Feature         Chrome   Edge         Firefox (Gecko)    Internet Explorer  Opera   Safari (WebKit)  
Basic support   1.0      (Yes)  1.0   (1.7 or earlier)   No support         ?       3.0
                -webkit               -moz[1]                                       -webkit

You can easily conclude that there is no even basic support in Internet Explorer for such property.

Considering that IE has been outdated by Edge, there is no reason to believe that there appearance will ever be supported.

Also appearance has been dropped, as today, from future CSS specifications.

IE & Firefox - custom drop down could not remove native arrows

Use this it will work but with IE10+ and for FF :

Your css should look like this:

select.desktopDropDown::-ms-expand {
    display: none;
}

More about ::ms-expand.

Then for the rest :

select.desktopDropDown {
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    background : url("../img/assets/arrow.png") no-repeat right #666;

    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

Note: I hardcoded path "../img/assets/arrow.png" as background.

This should work good for you in IE, Firefox and Opera .

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.