title: how to use a checkmark as a checkbox in css
body: <p>I have a check mark as shown below, I want to use the check mark to act as a check box, I don't want the tick to appear inside a check box. I want to be able to click on the tick so it gets selected. It should be like a checkbox but with out the box, any suggestions if this can be done in css?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkmark {
      display:inline-block;
      width: 22px;
      height:22px;
      -ms-transform: rotate(45deg); /* IE 9 */
      -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
      transform: rotate(45deg);
  }
  
  .checkmark_stem {
      position: absolute;
      width:3px;
      height:9px;
      background-color:#ccc;
      left:11px;
      top:6px;
  }
  
  .checkmark_kick {
      position: absolute;
      width:3px;
      height:3px;
      background-color:#ccc;
      left:8px;
      top:12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="checkmark"&gt;
      &lt;div class="checkmark_stem"&gt;&lt;/div&gt;
      &lt;div class="checkmark_kick"&gt;&lt;/div&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>