如何在不使用 JavaScript 的情況下建立以圖像作為選項的下拉選擇？

如何建立以圖像作為選項的下拉選擇

您想要實現一個以圖像而不是文字作為選項的下拉選擇。雖然使用 jQuery 組合框可能是一個流行的建議，但它保留文字作為主要選項，並僅使用圖像作為隨附圖示。然而，您的要求是讓圖像完全替換任何文字。

幸運的是，您甚至無需使用 JavaScript 即可實現此解決方案。操作方法如下：

HTML 結構：

<div>
<p>在此結構中，我們使用單選按鈕作為下拉清單中的「選項」。當您點擊連結的標籤時，它們將啟動單選按鈕，從而建立下拉清單的功能。 </p>
<p><strong>CSS 樣式：</strong></p>
<pre class="brush:php;toolbar:false">/* Style the overall dropdown box */
#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;  /* Hide when collapsed */
}
/* Style the dropdown when expanded */
#image-dropdown:hover {
    height: 200px;
    overflow-y: scroll;  /* Allow scrolling */
    transition: height 0.5s;
}
/* Hide the radio button visuals */
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* Style the dropdown options */
#image-dropdown label {
    display: none;
    margin: 2px;
    height: 46px;
    opacity: 0.2;
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;  /* Show all options when expanded */
}
/* Show the option related to the selected radio button */
#image-dropdown input:checked + label {
    opacity: 1 !important;
    display: block;
}

此樣式操作元素的可見性和樣式，創建以圖像作為選項的下拉選擇的錯覺。

您可以自訂http://jsfiddle.net/NDCSR/1/ 提供的範例以滿足您的特定需求，例如使用基於「for」屬性值的標籤選擇器來不同地設定每個選項的背景圖像。