배경 이미지 라디오 버튼

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

배경 이미지가 라디오 버튼 자체에서 잘 작동하지 않습니다.

<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는-그대로 작동합니다 : 당신이 할 수있는 것은 따르는 <label>으로 그들 각각의 포장입니다.

Answer 2

잘못된 클래스에 배경 스타일을 지정합니다. 귀하의 .selectable 클래스 정의에 넣으십시오.

Answer 3

"가짜 라디오 버튼"이 필요합니다. jquery를 포함하여 여러 가지 방법이 있습니다. 또는 easly css로 할 수 있습니다. 누군가 말했듯이 span 또는 label이라는 라디오 버튼을 포장해야합니다. 기본적으로 'div'와 같은 'block'요소가 아니므로이 속성을 지정하지 않으면 결과를 얻을 수 없습니다 (display : block 또는 display : inline-block). 또한 폭과 높이 (span/label을 의미)를 설정하고 불투명도 0을 라디오 버튼으로 설정하는 것을 잊지 마십시오. 나는 http://ajaxian.com/archives/custom-css-inputs 좀보고 당신에게 추천 또는 당신은 또한 http://www.iamntz.com/625/frontend-developer/formulare-custom-checkbox-radio-v-2/ (이 루마니아어에있는 경우 신경 끄시 고, 당신은 단지 데모를 확인하고 코드에 봐) 내부의 모양을 가질 수

에는 로켓 과학 없다 , 당신은 단지 몇 가지 물건을 돌봐 줘야 해.