如何在HTML中的Select元素中添加阴影？

Question

我有一个简单的下拉列表,我想添加一个投影.很难找到工作代码.你有什么建议？

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

Answer 1

最简单的解决方案是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. 您可以自己检查支持或使用Modernizr等脚本

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

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

DIV elements这个想法是使用 css3 box-shadow 属性和 -1 的 z-index动态创建。对我来说效果很好，你只需要为所有浏览器采用 css 属性。