用X替換html複選框

Question

我試圖用紅色的X替換窗體上的複選框。基本上，我希望窗體功能保持不變，但我不希望顯示爲框來檢查而是一個紅色的x點擊。我不知道如何替換複選框圖標。

Answer 1

你不能替代它，因爲它是一個瀏覽器特定的實現，你會發現它在不同的瀏覽器中看起來不同。然而，只需一點點努力，你就可以自己寫。一個簡約的例子是創建以下HTML結構...

<div> 
    <span class="chk" unchecked></span> 
    <input type="checkbox" /> 
</div> 

隱藏複選框，風格span看你想要的方式......

.chk 
{ 
    display:inline-block; 
    width:13px; 
    height:13px; 
    border-radius: 3px; 
    padding:2px; 
    border:1px #ccc solid; 
    cursor:pointer; 
} 
.chk[checked]{ 
    background:url(your-checked_image.png); 
} 
.chk[unchecked]{ 
    background:url(your_own_image.png); 
} 
input[type=checkbox] 
{ 
    display:none; 
} 

然後，你會需要交叉點擊事件來更改背景圖像，跟蹤檢查狀態並切換複選框。請注意，即使您需要使用表單標籤提交某些狀態，您仍然需要複選框。我做這一切與jQuery這使得一切很容易...

$(function(){ 
    $('.chk').click(function(){ 
     if($(this).attr('checked') == undefined) 
     { 
      $(this).attr('checked',""); 
      $(this).removeAttr('unchecked'); 
      $('input[type=checkbox]').prop('checked', true); 
     } 
     else 
     { 
      $(this).removeAttr('checked'); 
      $(this).attr('unchecked',""); 
      $('input[type=checkbox]').prop('checked', false); 
     } 
    }); 
}); 

我放在一起JS Fiddler，你可以玩。