javascript 如何在 HTML 中为 Select 元素添加阴影？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3905677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add drop shadow to Select element in HTML?
提问by JohnMax
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>
回答by Yi Jiang
Well, here's something I threw together rather quickly. It relies on Modernizr for feature detection, and wraps each selectwith a divthat has a box-shadowset to it.
嗯，这是我很快就拼凑起来的东西。它依赖于 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
});
}
This code attempts to shrink the outer divby 2px to compensate for browser padding. And the CSS:
此代码尝试将外部缩小div2px 以补偿浏览器填充。和 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-radiusfor this, but I believe OSX's selects are rounder than that, though I don't have anything on hand to test it out.
不是特别有效，但总比没有好。这里的主要问题是不同操作系统的默认表单样式可能不同。我border-radius为此设置了一个相当大的值，但我相信 OSX 的selects 比那个更圆，尽管我手头没有任何东西可以测试它。
See: http://jsfiddle.net/ykZCz/5/for the live version.
有关实时版本，请参见：http: //jsfiddle.net/ykZCz/5/。
回答by jAndy
Simplest solution is CSS3:
最简单的解决方案是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
-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这样的脚本
I wasn't aware that box-shadowdoes not work with selectelements. I came up with a fairly simple workaround:
我不知道这box-shadow不适用于select元素。我想出了一个相当简单的解决方法：
http://www.jsfiddle.net/YjC6y/2/
http://www.jsfiddle.net/YjC6y/2/
The idea is to dynamically create DIV elementswith 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.
这个想法是DIV elements使用 css3 box-shadow 属性和 -1 的 z-index动态创建。对我来说效果很好，你只需要为所有浏览器采用 css 属性。
回答by dash
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.
您还可以使用纯 CSS 在输入框中创建投影。为此，您必须首先声明边框，然后才能使用 box-shadow 属性创建下拉菜单。我最近在我的一个项目中做了它，所以我知道它适用于现代浏览器。
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;
}
回答by April
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).
使用 CSS 制作使用 select 标签制作下拉菜单的菜单确实有效。具有讽刺意味的是，我今晚在阅读本文之前尝试了它。您可以在下面的 HTML 页面中的 CSS 中尝试类似的操作（而不是在外部 CSS 文件中，除非您首先将外部 CSS 文件链接到您希望菜单具有此框阴影效果的 HTML 页面中） .
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. :)
但是，不要忘记添加 box-shadow 属性。也许这就是为什么它不能为用于创建它的菜单创建框阴影效果，而只能为菜单的下拉部分创建效果，一旦单击该菜单本身？或者，如果您的 CSS 位于外部 CSS 文件中，请确保将外部 CSS 文件链接到您希望菜单具有框阴影效果的任何 HTML 页面的 html 页面。:) 这有效，并且比大多数人可能做的编码少得多。:)
回答by Ankit Suryawanshi
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);
回答by April
@phpKid
@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. ;)
你提到了你所做的代码。当一个简单的方法可能对诸如以下 CSS 代码之类的东西起作用时，为什么要这样做呢？它可以使这个人免于使用更少的代码。;)
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}
回答by phpKid
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.
只需更改 #dropDownApple 中的宽度以适合您的表单宽度，您也可以与其他 css 元素混淆以获得您想要的高度。将上述内容复制并粘贴到<body></body>标签之间以查看其效果。曾在 IE9、Chorme、Safari 和 Firefox 中工作。
