2011-12-16 295 views
1

我想爲選中的複選框使用未選中複選框的圖像和其他圖像。我不想添加標籤,類或類似的東西。我想單獨保留HTML,只顯示<input type="checkbox" />我不介意使用JavaScript或jQuery,只要我可以單獨保留HTML。 這是我正在尋找的一個例子,但它只適用於Webkit瀏覽器。 http://jsfiddle.net/7kScn/ 如果不添加標籤或類或ID,是否會有解決方案?樣式複選框和單選按鈕

+0

你不介意的JavaScript附加類的頁面加載後,所以HTML代碼仍然在源裸? – 2011-12-16 19:49:50

+0

@SetSailMedia我正在考慮它,但我也希望它成爲更有機因此它覆蓋每一個複選框,單選按鈕... – henryaaron 2011-12-16 19:58:54

回答

0

不幸的是,我必須一直沒明確的,是的,有使用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/ 雖然顏色和字體很醜,但它完成了我需要的東西,再加上那些很容易改變。

0

樂趣週五的挑戰,這是我有點哈克實施。請記住,一個真正的應用程序,你必須有更好的輸入型的定位和更穩健的選擇:

的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"); 
     } 
    } 

});