圖像變成手機上

Question

選擇列表是沒有什麼辦法來對網頁，輕敲後，會顯示在手機上選擇窗口（也被稱爲「輪」）的圖像？基本上，要讓圖像替換掉下拉列表的默認顯示。我會定期使用桌面下拉菜單，但使用移動設備上的圖像。

我正在考慮在頁面上同時顯示圖片和下拉列表，並根據瀏覽器大小隱藏/顯示正確的項目，然後如果在小尺寸上單擊圖片以觸發隱藏的正確事件下拉菜單，但實際上並不顯示這些選項 - 它只是運行我在select標籤上與該事件關聯的任何代碼。

Answer 1

是的，這是絕對有可能的。

所有你需要做的是創造了選擇容器，其不透明度設置爲0，然後給容器的背景圖像。

例如代碼：

HTML

<div class="image"> 
    <select> 
     <option>test</option> 
     <option>test</option> 
     <option>test</option> 
     <option>test</option> 
    </select> 
</div> 

CSS

.image { background-image: url(http://eofdreams.com/data_images/dreams/cat/cat-06.jpg); background-size: cover; width: 100px; height: 100px;overflow: hidden; } 
select { opacity: 0; height: 250px; font-size: 50px; display: inline-block; margin: 10px; border: 0px; background: transparent; } 

---

實施例：http://jsfiddle.net/zmqBg/6/