如何使用圖像而不是文字建立下拉式選單？

帶有圖像的下拉選擇

您希望建立一個顯示圖像而不是文字的下拉選擇。雖然經常建議使用 jQuery 組合框，但它仍然需要在圖像旁邊添加文字。

解決方案：用圖像替換文字

令人驚訝的是，您可以在沒有 JavaScript 的情況下實現此下拉式選單！操作方法如下：

HTML 結構

使用單選按鈕和標籤：

<div>
<p><strong>CSS 樣式</strong></p>
<p>使用CSS 設定它們的樣式。隱藏單選按鈕，將標籤設定為看起來像下拉選項，並使下拉式選單在懸停時展開。 </p>
<pre class="brush:php;toolbar:false">#image-dropdown {
    /* Style the "box" in its minimized state */
    ...
}
#image-dropdown:hover {
    /* When expanded, the dropdown will get native means of scrolling */
    ...
}
#image-dropdown input {
    /* Hide the nasty default radio buttons */
    ...
}
#image-dropdown label {
    /* Style the labels to look like dropdown options */
    ...
}
...
#image-dropdown input:checked + label {
    /* Make the selected option visible in the collapsed menu */
    ...
}

功能

單選按鈕連結到標籤這樣點選標籤就會啟動對應的單選按鈕。當您將滑鼠懸停在下拉清單上時，它會展開，顯示所有圖像選項。即使在折疊狀態下，所選影像仍然可見。

範例

看完整範例：http://jsfiddle.net/NDCSR/1/

實作詳細資訊

• 在具有相對定位和高z-index 的容器內使用絕對定位。
• 對於不同的線條樣式，為每個基於標籤的標籤使用唯一的背景圖像在其「for」屬性上。