如何在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.