add drop shadow to Select element in HTML

Question

I have a simple drop down list and like to add shadow, it seem hard to find a working code, what do you suggest?

<select>
<option>apple</option>
</select>

Answer 1

take a look ath this: http://www.cssplay.co.uk/menus/pro_drop9.html

Answer 2

Well, here's something I threw together rather quickly. It relies on Modernizr for feature detection, and wraps each select with a div that has a box-shadow set to it.

if (Modernizr.boxshadow) {
    $('select').wrap('<div class="shadow" />').parent().width(function() {
        return $(this).outerWidth() - 2
    }).height(function() {
        return $(this).outerHeight() - 2
    });
}

This code attempts to shrink the outer div by 2px to compensate for browser padding. And the CSS:

.shadow {
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    display: inline-block;
}

Not particularly effective, but still better than nothing. The main problem here would be that different Operating System's default form styles could be different. I've set a rather large border-radius for this, but I believe OSX's selects are rounder than that, though I don't have anything on hand to test it out.

See: http://jsfiddle.net/ykZCz/5/ for the live version.