Javascript 如何在HTML中添加下拉阴影来选择元素？

我有一个简单的下拉列表，我想添加一个阴影到它。很难找到工作代码。你有什么建议

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

苹果
最简单的解决方案是
CSS3
：

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

这是
offsetX，offsetY，blur，color

这显然只适用于支持
CSS3-boxshadows
的浏览器。您可以自己进行支持检查，也可以使用以下脚本


我不知道
box shadow
不适用于
select
元素。我想出了一个相当简单的解决办法：


其思想是动态创建
DIV元素
，使用css3 box shadow属性和z索引-1。对我来说效果很好，你只需要为所有浏览器采用css属性
 嗯，这是我很快拼凑出来的东西。它依靠Modernizr进行特征检测，并使用设置了
框阴影的
div
包装每个
select

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

不是特别有效，但总比没有好。这里的主要问题是不同操作系统的默认表单样式可能不同。我已经为此设置了一个相当大的
边界半径
，但我相信OSX的
select
s比这更圆，尽管我手头没有任何东西可以测试它

请参阅：查看实时版本。
我是这样做的：

<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>


.影子{
盒影：5px 5px 5px rgba（0,0,0.5）；
边界塌陷：分离；
-moz盒阴影：5px 5px 5px rgba（0,0,0.5）；
-webkit盒阴影：5px 5px 5px rgba（0,0,0.5）；
}
#落叶松{
宽度：100px；
}
.全宽{
宽度：100%；
边界：0；
保证金：0；
}
苹果

只需更改#dropDownApple中的宽度以适合您的表单宽度，您就可以与其他css元素混在一起以获得您想要的高度。在
标记之间复制并粘贴上述内容，以查看其实际效果。在IE9、Chorme、Safari和Firefox中工作。
您也可以使用纯CSS在输入框中创建阴影。为此，必须首先声明边框，然后可以使用“框阴影”属性创建下拉列表。我最近在我的一个项目中做了这个，所以我知道它适用于现代浏览器

下面是一个示例代码：

#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;
}

使用CSS创建菜单，使用select标记创建下拉菜单确实有效。讽刺的是，我今晚在读这篇文章之前就试过了。您可以在HTML页面的CSS中尝试以下类似的操作（而不是在外部CSS文件中，除非您首先将外部CSS文件链接到HTML页面中，您希望菜单具有此框阴影效果）

但是，不要忘记添加长方体阴影属性。也许这就是为什么它不能为用于创建它的菜单创建框阴影效果，而只能在单击菜单后为菜单的下拉部分创建效果？或者，如果CSS在外部CSS文件中，请确保将外部CSS文件链接到您希望菜单具有框阴影效果的html页面的html页面。：）这是可行的，而且比大多数人可能做的编码要少得多。：）

@phpKid

由于我没有足够的分数，但，允许添加一个元素，我将张贴给你，在这里，这样：

你提到了你所做的代码。当一个简单的方法可以处理诸如以下CSS代码之类的东西时，为什么所有这些都会发生呢？它可以避免此人使用更少的代码

您可以尝试在外部设置阴影：

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

或者，如果您希望它位于元素内部（用于按钮）：

回答之前请先试试。我猜他希望阴影出现在下拉列表中，而不是选择元素。@Douglas:不应该是那种问题。要在每个
select
上添加
mouseup/down
事件处理程序，需要更多的努力。修改基本div高度。@吉姆：显然，IE7不支持css3，不用担心。我不知道-am now:）。问题是OSX的宽度和高度小于2-2像素。圆角很好。@fabrik叹息。。。除非我们在
select
元素本身上手动设置
border radius
，否则这可能不起作用。
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}

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

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

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