title: Styling Checkbox
body: <p>I am trying to insert an image instead of a check on the check box. The code that am using is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .bl {
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
  width: 90%;
  height:30px;
  border-radius: 5px;
  margin-right:auto;
  margin-left:auto;
  margin-top:10px;
  margin-bottom:10px;
  }
  p
  {
  font-family:"Times New Roman";
  font-size:10px;
  }
  
  checkbox
  {
    width: 75px;
    height: 75px;
    padding: 0 5px 0 0;
    background: url(images/Green_tick.png) no-repeat;
    display: block;
    clear: left;
    float: left;
  }
  
  .checked {
    position: absolute;
    width: 200px;
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(images/Green_tick.png) no-repeat;
    overflow: hidden;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
  function Checked(id)
  {
  if(id.checked==1)
  {
      alert("Checked");
  }
  else
  {
      alert("You didn't check it! Let me check it for you.")
          id.checked = 1;
  
  }
  }
  
  &lt;/script&gt;
  
  &lt;div class="main_menu"&gt;
      &lt;a id='menu' href="javascript:" onclick="loadMenuPage();"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;p&gt;
  All verifications required for QR7 can be uploaded here. Any item which still requires verification is
  marked in red until picture has been attached.
  &lt;/p&gt;
  &lt;div class="bl"&gt;  
  &lt;input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"&gt; Income &lt;/input&gt;
  &lt;/div&gt;
  &lt;div class="bl"&gt;  
  &lt;input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"&gt; Property &lt;/input&gt;
  &lt;/div&gt;
  &lt;div class="bl"&gt;  
  &lt;input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"&gt; Court Order Child Support &lt;/input&gt;
  &lt;/div&gt;
  &lt;div class="bl"&gt;  
  &lt;input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"&gt; Future Medical Child Support &lt;/input&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions on how do i achieve it. As of now i get a normal tick in the checkbox. </p>
  
  <p>Thanks in advance.</p>