javascript - 如何为 HTML 中的 Select 元素添加阴影？

Question

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

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

Answer 1

好吧，这是我很快拼凑起来的东西。它依靠 Modernizr 进行特征检测，并将每个 select 包装在一个 div 中，该 div 设置了 box-shadow 。

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

此代码尝试将外部 div 缩小 2px 以补偿浏览器填充。和 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;
}

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

参见:http://jsfiddle.net/ykZCz/5/对于实时版本。