帶有圖像的下拉選擇
您希望建立一個顯示圖像而不是文字的下拉選擇。雖然經常建議使用 jQuery 組合框，但它仍然需要在圖像旁邊添加文字。
解決方案：用圖像替換文字
令人驚訝的是，您可以在沒有 JavaScript 的情況下實現此下拉式選單！操作方法如下：
HTML 結構
使用單選按鈕和標籤：
<div>
CSS 樣式
使用CSS 設定它們的樣式。隱藏單選按鈕，將標籤設定為看起來像下拉選項，並使下拉式選單在懸停時展開。
#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/
實作詳細資訊
以上是如何使用圖像而不是文字建立下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
