How do I add drop shadow to Select element in HTML?

Question

I have a simple drop down list and I would like to add a drop shadow to it. It is hard to find working code. What do you suggest?

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

Answer 1

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.

Answer 2

Simplest solution is CSS3:

-moz-box-shadow:5px 5px 5px #191919;
-webkit-box-shadow:5px 5px 5px #191919;
box-shadow:5px 5px 5px #191919;

which is offsetX, offsetY, blur, color

This obviously only works in a browser that supports CSS3 boxshadows. You either can do the check for support yourself or use a script like Modernizr

I wasn't aware that box-shadow does not work with select elements. I came up with a fairly simple workaround:

http://www.jsfiddle.net/YjC6y/2/

The idea is to dynamically create DIV elements with a css3 box-shadow property and a z-index of -1. Works pretty well for me, you just need to adopt the css propertys for all browsers.

Answer 3

You may also create a drop shadow in the input box using pure CSS. To do so, You must first declare the border, and then you can use the box-shadow property to create your drop-down. I recently did it in a project of mine, so I know it works for modern browsers.

Here is an example code:

#example {
-webkit-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow:    1px 1px 0px rgba(50, 50, 50, 0.49);
box-shadow:         1px 1px 0px rgba(50, 50, 50, 0.49);
border:1px solid gray;
}