[英]How do I add drop shadow to Select element in HTML?
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>
Well, here's something I threw together rather quickly. 嗯,这是我很快就把它扔在一起的东西。 It relies on Modernizr for feature detection, and wraps each
select
with a div
that has a box-shadow
set to it. 它依赖于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
});
}
This code attempts to shrink the outer div
by 2px to compensate for browser padding. 此代码尝试将外部
div
缩小2px以补偿浏览器填充。 And the CSS: 而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-radius
for this, but I believe OSX's select
s are rounder than that, though I don't have anything on hand to test it out. 我为此设置了一个相当大的
border-radius
,但我相信OSX的select
比这更圆,尽管我手边没有任何东西来测试它。
See: http://jsfiddle.net/ykZCz/5/ for the live version. 请参阅: http : //jsfiddle.net/ykZCz/5/了解实时版本。
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
这是
offsetX, offsetY, blur, color
This obviously only works in a browser that supports
CSS3 boxshadows
.
这显然只适用于支持
CSS3 boxshadows
的浏览器。
You either can do the check for support yourself or use a script like
Modernizr
您可以自己检查支持,也可以使用
Modernizr之类的脚本
I wasn't aware that box-shadow
does not work with select
elements. 我不知道
box-shadow
对select
元素不起作用。 I came up with a fairly simple workaround: 我提出了一个相当简单的解决方法:
http://www.jsfiddle.net/YjC6y/2/ http://www.jsfiddle.net/YjC6y/2/
The idea is to dynamically create DIV elements
with a css3 box-shadow property and a z-index of -1. 我们的想法是使用css3 box-shadow属性和z-index为-1动态创建
DIV elements
。 Works pretty well for me, you just need to adopt the css propertys for all browsers. 对我来说效果很好,你只需要为所有浏览器采用css属性。
You may also create a drop shadow in the input box using pure CSS. 您还可以使用纯CSS在输入框中创建投影。 To do so, You must first declare the border, and then you can use the box-shadow property to create your drop-down.
为此,您必须首先声明边框,然后可以使用box-shadow属性创建下拉列表。 I recently did it in a project of mine, so I know it works for modern browsers.
我最近在我的一个项目中做过,所以我知道它适用于现代浏览器。
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;
}
Using CSS to make the menu that uses the select tag to make make a dropdown menu DOES work. 使用CSS制作使用select标签的菜单,使下拉菜单正常工作。 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).
您可以在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. 但是,不要忘记添加box-shadow属性。 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.
或者,如果您的CSS位于外部CSS文件中,请确保将外部CSS文件链接到您希望菜单具有盒阴影效果的任何HTML页面的html页面。 :) This works and is a lot less coding than most might do.
:)这是有效的,并且比大多数人的编码少得多。 :)
:)
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);
@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: ... 由于我没有足够的积分,但是,允许添加一个co,我会发布给你,这里,这样:...
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?
为什么当一个简单的方法可能适用于诸如以下CSS代码之类的东西时呢? It could save this person away from using a lot less code.
它可以使这个人远离使用更少的代码。 ;)
;)
select {
width: 200px;
height: 20px;
background-color: #FFFFFF;
position: relative;
box-shadow: 6px 6px 2px 2px #BF0B3E;
}
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. 只需更改#dropDownApple中的宽度以适合您的表单宽度,您就可以使用其他css元素来获得您想要的高度。 Copy and paste the above in between
<body></body>
tags to see it in action. 将上面的内容复制并粘贴在
<body></body>
标记之间,以查看它的实际效果。 Worked in IE9, Chorme, Safari and Firefox. 曾在IE9,Chorme,Safari和Firefox工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.