Question

The DXImageTransform.Microsoft.Shadow filter moves the visual presentation of the input but the cursor is left in its original place.

The CSS:

input {
    filter:
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
      progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);
}

Demo Page: http://jsfiddle.net/zerkms/Pzqtd/

If you open it in IE8 or IE9 you’ll see that the cursor of the input is 50px above the input.

So any ideas how to fix it or may be other solutions to create shadow for input in IE8?

I need the shadow for IE8 specifically – I cannot use box-shadow

Answer 1

This is sort of a hack but worked for me. You might need to tweak it a bit. http://jsfiddle.net/subash1232/DDUvP/

HTML:

<div class="shadow">
</div>

<input type="text" value="value" />

CSS

input {
   border: 1px solid red;
   position: relative;
   width: 178px;
   top: 34px;
   left:9px;
   z-index: 1000;
}

.shadow{
   height: 20px;
   width: 180px;
   background: white;
   filter:  
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=0,strength=50),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=45,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=90,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=180,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=225,strength=2),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=270,strength=5),
     progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=315,strength=2);

}