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 select s 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;
}

Answer 4

Using CSS to make the menu that uses the select tag to make make a dropdown menu DOES work. I tried it, tonight, ironically, before reading this. You might try something like this, below, within the CSS within your HTML page (not within your external CSS file, unless you first link your external CSS file into your HTML page where you are wanting your menu to have this box-shadow effect).

select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}

But, don't forget to add the box-shadow property. Maybe that was why it didn't work of creating a box-shadow effect for the menu that uses to create it, but only worked of creating the effect for the dropdown part of the menu, itself once that menu was clicked? Or if your CSS was within your external CSS file, make sure you linked your external CSS file to your html page of whatever HTML page you want your menu to have the box-shadow effect. :) This works and is a lot less coding than most might do. :)

Answer 5

You can try for shadow outside:

box-shadow: 1px 6px 2px 2px #ccc;

or if you want it inside the element (for a button) :

box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);

Answer 6

@phpKid

Since I didn't have enough points, yet, to be allowed to add a coment, I will post to you, here, this way: ...

You mentioned of the code you did. Why do all of then when a simple method might work of something such as the following CSS code? It could save this person away from using a lot less code. ;)

select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}

Answer 7

I did it like this:

<style type="text/css">
   .shadow {
      box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
      border-collapse: separate;
      -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
      -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    }

    #dropDownApple {
        width:100px;    
    }

    .fullWidth {
        width:100%;
        border:0;
        margin:0;   
    }
</style>

<div id="dropDownApple" class="shadow">
    <select class="fullWidth">
        <option>apple</option>
    </select>
</div>

Just change the width in #dropDownApple to fit your form width and you can mess with other css elements to get the height you want too. Copy and paste the above in between <body></body> tags to see it in action. Worked in IE9, Chorme, Safari and Firefox.