Question

I have the following Shadow CSS properties applied to a form to to get cross browser support. It’s working in Firefox, chrome and IE9, but in IE8 and below shadow is being applied to the input fields rather then the form itself. How can i work around this.

<form>
    input1: <input type="text"><br>
    input2: <input type="text"><br>
    <input type="submit" value="submit">
</form>

form {
    width:400px;
    height:200px;
    -moz-box-shadow: 3px 3px 4px #ccc;
    -webkit-box-shadow: 3px 3px 4px #ccc;
    box-shadow: 3px 3px 4px #ccc; /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
}

Check http://jsfiddle.net/FnXwk/

Answer 1

Put an explicit background colour on the form element. The IE shadow filter applies to the first non-transparent element in the tree.