如何建立顯示圖像而不是文字的下拉式選單？

在下拉選項中顯示圖像

建立一個包含圖像而不是文字的下拉選項可能具有挑戰性。雖然 jQuery 組合框已經被提出，但它依賴於提供帶有圖像的文字選項。要完全用圖像替換文本，需要不同的方法。

聰明的 CSS 解決方案

對於這個特定的用例，其中圖像代表在線中的線條粗細繪畫應用程序，不需要 JavaScript。相反，我們可以利用單選按鈕和 CSS 來創造所需的效果。

HTML 結構

CSS 樣式

>技巧在於使用「for」和「id」屬性將標籤與單選按鈕關聯。單擊標籤時，會啟動對應的單選按鈕。 CSS 樣式確保：

在折疊狀態下，只有選定的單選按鈕的標籤可見。

當下拉清單展開（懸停時）時，將顯示所有標籤。
• 即使在折疊狀態下，選取的單選按鈕後面的標籤仍然可見。
• 透過將背景影像指派給標籤，下拉選項將顯示為影像。這種方法有效地用圖像替換了文本，無需 JavaScript 即可實現所需的功能。

以上是如何建立顯示圖像而不是文字的下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！