如何將陰影添加到HTML中的Select元素？

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/

的想法是動態創建DIV elements用CSS3 box-shadow屬性和-1的z-index。對我來說工作得很好，你只需要爲所有瀏覽器採用CSS屬性。

來源

2010-10-11 11:20:27 jAndy

+3

請您嘗試一下再回答。 – fabrik 2010-10-11 11:23:26

+0

是的，它不工作，我很久以前就嘗試過這種解決方案。 – JohnMax 2010-10-11 11:25:38

+0

我猜他想讓陰影在下拉本身上，而不是選擇元素。 – Douglas 2010-10-11 11:50:20

3

好吧，這裏是我扔得很快的東西。它依靠Modernizr進行功能檢測，並將每個select都包含一個div，該div對其設置了box-shadow。

if (Modernizr.boxshadow) { 
    $('select').wrap('<div class="shadow" />').parent().width(function() { 
     return $(this).outerWidth() - 2 
    }).height(function() { 
     return $(this).outerHeight() - 2 
    }); 
}

此代碼試圖通過2px的收縮在外div以補償瀏覽器填充。和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/爲實時版本。

來源

2010-10-11 11:47:02

+0

問題是OSX的寬度和高度是更小的2-2個像素。圓角很好。 – fabrik 2010-10-11 12:01:34

+0

@fabrik嘆息......除非我們在'select'元素本身手動設置'border-radius'，否則這可能不會起作用。 – 2010-10-11 12:18:12

0

我做了這樣的：

<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工作。

來源

2012-03-10 16:07:49 phpKid

1

您也可以使用純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; 
}

來源

2012-07-14 21:18:06 dash

1

使用CSS來製作一個使用選擇標籤，使做出的下拉菜單不工作的菜單。諷刺的是，今晚我在閱讀本文之前試過了。您可以在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

來源

2015-03-20 08:04:18 April

0

@phpKid

因爲我沒有足夠的積分，然而，被允許添加COMENT，我會快遞給你，在這裏，像這樣：...

您提到了您所做的代碼。爲什麼所有這些當一個簡單的方法可能工作的東西，如下面的CSS代碼？它可以避免使用更少的代碼。 ;）

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

來源

2015-03-20 08:21:52 April

1

你可以嘗試陰影以外：

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

，或者如果你想要的元素（一個按鈕內）：

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

來源

2015-03-20 08:51:11

如何將陰影添加到HTML中的Select元素？

回答

相關問題