box-shadow IE8 not working on IE8

Question

I've look all relevant topics but could not find solution so I created this question. Im trying to implement box-shadow on IE8 And its not working.. It works on IE9+?

I have simple div:

<span id="controls" class="box-shadow"> 
<input id="start" type="text" placeholder="Get Directions: Enter Address or Postcode"/> 
<input id="end" type="hidden" value="Text" /> 
</span>

And CSS:

#controls.box-shadow{
background-color: white;
font-size: 13px;
position: relative;
padding: 5px;
z-index: 10000;
float: right;
height: 35px;
width: 96%;
margin-left: 20px;

}
.box-shadow{
box-shadow: 0px 0px 15px 0px #232361;
-moz-box-shadow: 0px 0px 15px 0px #232361;
-webkit-box-shadow: 0px 0px 15px 0px #232361;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#232361');
}
#start{ width:82%; height:27px; border:none; padding:5px}

Answer 1

Box-shadow doesn't work natively in IE8 but you can use a polyfill for CSS3.

Here's a working example: http://css3pie.com/

You need to apply the polyfill to your element like so

.box-shadow {
     box-shadow: 0px 0px 15px 0px #232361;
     -moz-box-shadow: 0px 0px 15px 0px #232361;
     -webkit-box-shadow: 0px 0px 15px 0px #232361;
    behavior: url(PIE.htc);
}

Answer 2

CSS3 box-shadow is not supported in IE8 or below. I personally would not worry about IE8 support, but if you need to, then MS has a DropShadow that has been around since IE5.5.

Box Shadow Support

Drop Shadow

Answer 3

if you don't want to use any third party plugin, you can refer to this website:

http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/