title: Custom pictures for checkbox?
body: <p>I would like to show checkbox as toggle button. But I can't apply my custom pictures to it with CCS -- still checkbox is drawn. How to accomlish this task?</p>
  
  <p>My CSS:</p>
  
  <pre><code>input[type=checkbox]#settingsbutton {
      border-style: none;
      background-color: transparent;
      width: 42px;
      height: 40px;
      display: block;
  }
  
  input[type=checkbox].button-settings {
      background-image: url("images/button-settings-normal.png");
  }
  
  input[type=checkbox].button-settings:active {
      background-image: url("images/button-settings-normal.png");
  }
  
  input[type=checkbox].button-settings:hover {
      background-image: url("images/button-settings-hover.png");
  }
  
  input[type=checkbox].button-settings:active {
      background-image: url("images/button-settings-pressed.png");
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code> &lt;body&gt;
  
  &lt;input type="checkbox" id="settingsbutton" class="button-settings"/&gt;
  
   &lt;/body&gt;
  </code></pre>