如何在HTML中的Select元素中添加阴影？
[英]How do I add drop shadow to Select element in HTML?
问题描述
我有一个简单的下拉列表，我想添加一个投影。 很难找到工作代码。 你有什么建议？
<select>
<option>apple</option>
</select>
7 个解决方案
解决方案1
3 2010-10-11 11:47:02
嗯，这是我很快就把它扔在一起的东西。 它依赖于Modernizr进行特征检测，并使用设置了box-shadow的div包装每个select 。
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/了解实时版本。
解决方案2
2 2010-10-11 11:20:27
最简单的解决方案是
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属性。
解决方案3
1 2012-07-14 21:18:06
您还可以使用纯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;
}
解决方案4
1 2015-03-20 08:04:18
使用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页面。 :)这是有效的，并且比大多数人的编码少得多。 :)
解决方案5
1 2015-03-20 08:51:11
你可以在外面尝试阴影：
box-shadow: 1px 6px 2px 2px #ccc;
或者如果你想在元素内部（对于一个按钮）：
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
解决方案6
0 2015-03-20 08:21:52
@phpKid
由于我没有足够的积分，但是，允许添加一个co，我会发布给你，这里，这样：...
你提到过你所做的代码。 为什么当一个简单的方法可能适用于诸如以下CSS代码之类的东西时呢？ 它可以使这个人远离使用更少的代码。 ;）
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}
解决方案7
0 2012-03-10 16:07:49
我是这样做的：
<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工作。
仅当它是最后一个子元素时，我如何 select 阴影 DOM 宿主元素？
[英]How do I select the shadow DOM host element only if it is the last-child?
我如何 select 一个匹配的 html 元素不是使用 javascript 的事件？
[英]How do I select a matching html element that is not the event using javascript?
我如何给一个盒子阴影<div>元素或<hr />阴影从中间淡出的元素？
[英]How do I give box shadow to a <div> element or <hr /> element where the shadow fades out from the middle?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.