Question

DXImageTransform.Microsoft.Shadow过滤器移动输入的视觉呈现，但光标保留在原始位置。

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);
}

演示页：http://jsfiddle.net/zerkms/Pzqtd/

如果在IE8或IE9中打开它，您会看到输入的光标高于输入的50px。

那么任何想法如何解决它或者可能是在IE8中为输入创建阴影的其他解决方案？

我特别需要IE8的影子 - 我不能使用box-shadow

Answer 1

这有点像黑客但对我有用。您可能需要稍微调整一下。 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);

}

IE8阴影过滤器输入偏移光标

1 个答案: