從圖像組中選擇圖像

Question

我希望用戶能夠從一組圖像中選擇圖像。我想這樣做的方式是a）既是表單元素的一部分，又b）適用於未啓用JavaScript的舊版瀏覽器/瀏覽器。

我想過重寫css使一組radio buttons顯示圖像，但看起來像是很難隱藏子彈。

另一種選擇是覆蓋option...select結構中的css以顯示圖像，但只適用於某些瀏覽器。

有沒有簡單的方法來做到這一點？或者我應該創建兩個選項：一個用於帶有Javascript的瀏覽器，另一個用於沒有的瀏覽器？

Answer 1

你可以做一個<label>每個單選按鈕的圖像部分，並與visibility: hidden什麼隱藏的單選按鈕。

<label> 
    <img src="image1.png" alt="Some image" /> 
    <input type="radio" name="image" value="1" /> 
</label> 

......想起來了，那是相當多，你能給單選按鈕的圖像的唯一途徑，並預期它應該工作。 （除非你打算使用background-image？）