JQueryMobile - 用圖像替換複選框打勾 - 完整的CSS

Question

我想用只有CSS的圖像替換複選框。你可以看到，我想實現下面這張圖是什麼：

http://cdn.thenextweb.com/wp-content/blogs.dir/1/files/2013/03/3.1InActivitySettings-220x376.png

我幾乎有，但我堅持。你可以找到我做了什麼至今這裏： JSFiddle

HTML

<div data-role="content" class="content"> 
    <div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup" data-iconpos="right"> 
      <input type="checkbox" name="checkbox-0" id="checkbox-0" class="check" /> 
      <input type="checkbox" name="checkbox-1" id="checkbox-1" class="check" /> 
      <input type="checkbox" name="checkbox-2" id="checkbox-2" class="check" /> 
      <input type="checkbox" name="checkbox-3" id="checkbox-3" class="check" /> 
      <label for="checkbox-0">15 minutes</label> 
      <label for="checkbox-1">30 minutes</label> 
      <label for="checkbox-2">45 minutes</label> 
      <label for="checkbox-3">60 minutes</label> 
     </fieldset> 
    </div> 
</div> 

CSS

.ui-checkbox-on { 
    background-image: url(images/checkmark.png); 
} 

.ui-checkbox-on .ui-icon { 
    background-color: rgba(0, 0, 0, 0); 
} 

.ui-icon-checkbox-off { 
    background-image: none; 
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 
    border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; 
    background-color: rgba(0, 0, 0, 0); 
} 

Answer 1

這個CSS的伎倆。

DEMO

.ui-checkbox-on .ui-icon { 
    width: 32px!important; 
    height: 32px!important; 
    margin-left: -20px !important; 
    margin-top: -15px !important; 
    box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; 
    -webkit-border-radius: 0 !important; border-radius: 0 !important; 
    background: url(images/checkmark.png) 50% 50% no-repeat; 
} 

.ui-icon-checkbox-off { 
    background-image: none; 
    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; 
    border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; 
    background-color: rgba(0, 0, 0, 0); 
} 

[更改複選框檢查圖像以自定義圖像]的