Question

I’m using an IE-only filter dropshadow on a <div>, but this affects the caret/text cursor position of input and textarea fields within it.

HTML:

<div id="box">
    <input type="text"/>   
</div>

CSS:

filter: progid:DXImageTransform.Microsoft.DropShadow(
    OffX=-8, 
    OffY=-8, 
    Color='#00ff0000', 
    Positive='true');

A live example can be seen at http://jsfiddle.net/Xg8Lb/2/ (the bug is only visible in IE).

Does anyone have any ideas for a workaround?

edit: The bug is apparent in IE8 and IE9. I have not tried in IE10. A quick try told me IE7 won’t even let me type in the fields when dropshadow is applied, but this might just as well be jsfiddle – don’t know, and don’t care 🙂

Answer 1

I’ve added the following code to CSS:

#box input, #box textarea
{
    position:relative;
}

This fixed problem in my case. Please see modified fiddle: http://jsfiddle.net/keaukraine/XxBsE/