背景圖像單選按鈕

Question

是否有可能使用jQuery爲每個單選按鈕設置自己的背景圖像？我的意思是：

<form id="tiepspiel" name="tiepspiel" action="#" method="POST"> 
     <ul id="sortable"> 
     <?php 
     $count = 5; 
     $i = 1; 
     while ($i <= $count) { 
      echo '<li><ul class="elements"> 
     <li class="selectable"> 
      <label class="stein"><input type="radio" name="selected__'.$i.'" value="stein</label> 
      <span></span> 
     </li> 
     <li class="selectable"> 
      <label class="schere"><input type="radio" name="selected_'.$i.'" value="schere"></label> 
      <span></span> 
     </li> 
     <li class="selectable"> 
      <label class="papier"><input type="radio" name="selected_'.$i.'" value="papier"></label> 
      <span></span> 
     </li> 
    </ul> 
        </li>'; 
      $i++; 
     } 
     ?> 
     <hr> 
     <button>Submit</button> 
     </ul> 
     </form> 

和我想的CSS添加到每個班級。例如：

.papier { 
    background-image: url("../images/papier_blue.png"); 
    width: 82px; 
    height: 82px; 
    cursor: pointer; 
    margin-right: 50px; 
} 

Answer 1

背景圖像對單選按鈕本身效果不佳。你可以做的就是將它們包裝每一個<label>如下：

<ul class="elements"> 
    <li class="selectable"> 
     <label class="stein"><input type="radio" name="stein" value="stein"></label> 
     <span></span> 
    </li> 
    <li class="selectable"> 
     <label class="schere"><input type="radio" name="schere" value="schere"></label> 
     <span></span> 
    </li> 
    <li class="selectable"> 
     <label class="papier"><input type="radio" name="papier" value="papier"></label> 
     <span></span> 
    </li> 
</ul> 

然後，你的CSS應該工作原樣。

Answer 2

您將背景樣式放在錯誤的類上。把它們放在你的.selectable類定義中。

Answer 3

我想你需要一種「假單選按鈕」。有很多方法可以做到這一點，包括jQuery，或者你可以輕鬆地用CSS來做到這一點。正如有人所說，你必須用span或label包裹單選按鈕。默認情況下，它們不是'block'元素，比如'div'，所以你不能得到你的結果，除非你不會將這個屬性（display：block;或者display：inline-block;）歸爲一類。另外不要忘記設置寬度和高度（我的意思是跨度/標籤），並設置不透明度0爲單選按鈕。 我建議你看看http://ajaxian.com/archives/custom-css-inputs或者你也可以看看裏面http://www.iamntz.com/625/frontend-developer/formulare-custom-checkbox-radio-v-2/（沒關係，如果它是在羅馬尼亞，你只檢查演示，看看到的代碼）

沒有火箭科學，你只需要照顧一些東西。