스타일 지정 확인란 및 라디오 버튼

Question

확인란을 선택하지 않은 이미지는 사용하고 선택란은 다른 이미지를 사용하고 싶습니다. 레이블이나 수업 등을 추가하고 싶지 않습니다. HTML 만 남기고 싶다면 <input type="checkbox" /> JavaScript를 사용하거나 jQuery를 사용해도 상관 없다. 이것은 내가 찾고있는 예제이지만 Webkit 브라우저에서만 작동합니다. http://jsfiddle.net/7kScn/ 라벨이나 클래스 또는 ID를 추가하지 않고도이를 해결할 수 있습니까? 단지 베타 것으로 보이지만

Answer 1

당신은 더 나은 입력 유형 타겟팅 및보다 강력한 선택기를 포함해야 겠다는 앱을 염두에 유지 jQuery, CSS (X) HTML 및 기타 무엇이든 할 수있는 매우 유연하고 멋진 것들 ... 그러나 본질적으로 input은 div으로 변환됩니다. 일부 드롭 다운에는 좋은 것을 찾기가 어려웠습니다. 선택 상자에서이를 찾았고 체크 박스와 라디오 버튼과 비슷한 기능을 수행 할 수 있는지 확인하려고합니다. http://bavotasan.com/2011/style-select-box-using-only-css/

나는 완벽한 것을 발견했습니다. http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/ 색상과 글꼴이 꽤 못 생겼지 만, 필자가 필요로하는 것 외에는 변경하기 쉽습니다.

Answer 2

이 흥미로운 옵션과 같습니다

http://widowmaker.kiev.ua/checkbox/

Answer 3

재미 금요일 도전, 여기 내 다소 해키 구현입니다.

JSFiddle : 나는 명확하지해야합니다, 그래, 거기에 불행하게도 http://jsfiddle.net/2RNVh/

$("input").each(function() { 
    var $this = $(this); 
    $this.hide(); 

    var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);  

    $image.bind("click", function() { 
     var $checkbox = $(this).prev("input"); 
     $checkbox.prop("checked", !$checkbox.prop("checked"));  
     checkImage(); 
    }) 

    function checkImage() { 
     if($image.prev("input").prop("checked")) { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png"); 
     } else { 
      $image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png"); 
     } 
    } 

}); 

Answer 4

Jquery UI로가는 것이 도움이 될 수 있습니다.

체크 박스 예. http://jqueryui.com/button/#checkbox

라디오 예 : http://jqueryui.com/button/#radio

GL의 HF