3

过滤器移动输入的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

4

1 回答 1

2

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

}
于 2013-01-23T01:49:28.153 回答