如何建立以圖像作為選項的下拉選擇
您想要實現一個以圖像而不是文字作為選項的下拉選擇。雖然使用 jQuery 組合框可能是一個流行的建議，但它保留文字作為主要選項，並僅使用圖像作為隨附圖示。然而，您的要求是讓圖像完全替換任何文字。
幸運的是，您甚至無需使用 JavaScript 即可實現此解決方案。操作方法如下：
HTML 結構：
<div>
在此結構中，我們使用單選按鈕作為下拉清單中的「選項」。當您點擊連結的標籤時，它們將啟動單選按鈕，從而建立下拉清單的功能。
CSS 樣式：
/* 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」屬性值的標籤選擇器來不同地設定每個選項的背景圖像。
以上是如何在不使用 JavaScript 的情況下建立以圖像作為選項的下拉選擇？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
