Drop shadow on a div container?

css html dropshadow
Mike picture Mike · May 14, 2009 · Viewed 128.8k times · Source

I have a searchbox with auto-suggest that pops a div up underneath it with multiple search string suggestions (like google). Is it possible to have drop shadow on the auto-suggest box with CSS or will I need a script of some sort? I tried a background image but the number of suggests can vary from 1 to 10 or 15.

I'd prefer something that works in IE6+ and FF2+ if possible. Thanks!

Answer

Scott H picture Scott H · Feb 26, 2011

This works for me on all my browsers:

.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}

then just give any div the shadow class, no jQuery required.

Related questions

css3 drop shadow under another div, z-index not working

i'm trying to use a drop shadow to make it look like one div (the header) is "above" another. my problem is that the "middle" div is covering the drop shadow. i tried using z-index to put the header div …

Read More
CSS Speech Bubble with Box Shadow

Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code. Is this possible? Or am I better off using border-image …

Read More
Using CSS, how do you create larger elements when the mouse is over them?

The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too. When the mouse is not over the boxes, they go back to the same size with no …

Read More