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

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

}
于 2013-01-23T01:49:28.153 に答える