Question

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

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

Answer 1

嗯，这是我很快就把它扔在一起的东西。它依赖于Modernizr进行特征检测，并将每个select包含一个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/了解实时版本。

Answer 2

~~最简单的解决方案是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/

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

Answer 3

您也可以使用纯CSS在输入框中创建投影。为此，您必须首先声明边框，然后可以使用box-shadow属性创建下拉列表。我最近在我的一个项目中做过，所以我知道它适用于现代浏览器。

以下是一个示例代码：

#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

使用CSS制作使用select标签的菜单制作下拉菜单。今晚，我讽刺地尝试过，然后再读这篇文章。您可以在HTML页面的CSS内部尝试下面这样的内容（不在您的外部CSS文件中，除非您首先将外部CSS文件链接到HTML页面，您希望菜单具有此框阴影效果）

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

但是，不要忘记添加box-shadow属性。也许这就是为什么它没有为用于创建它的菜单创建盒子阴影效果的原因，但是只有在单击该菜单后才能为菜单的下拉部分创建效果？或者，如果您的CSS位于外部CSS文件中，请确保将外部CSS文件链接到您希望菜单具有盒阴影效果的任何HTML页面的html页面。 :)这是有效的，并且比大多数人的编码少得多。：）

Proof of That CSS Works to Create Box-shadow on Select Menu

Answer 5

你可以在外面尝试阴影：

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

或者如果你想要它在元素内（对于一个按钮）：

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

Answer 6

我是这样做的：

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

只需更改#dropDownApple中的宽度以适合您的表单宽度，您就可以使用其他css元素来获取您想要的高度。将上述内容复制并粘贴到<body></body>代码之间，以查看其效果。曾在IE9，Chorme，Safari和Firefox工作过。

Answer 7

@phpKid

由于我没有足够的积分，但是，允许添加一个co，我会发布给你，这里，这样：...

你提到过你所做的代码。为什么当一个简单的方法可能适用于诸如以下CSS代码之类的东西时呢？它可以使这个人远离使用更少的代码。 ;）

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

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

7 个答案: