title: Custom Checkbox Issue in only Edge
body: <p>I am facing a strange problem with a checkbox that I have customized for my personal blog. I was checking for browser compatibility when I found this scenario. </p>
  
  <p>The custom checkbox is working in Chrome, Firefox and IE 10. But when I checked for Edge, it is not working and the styles are not getting applied.</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>label {
    display: inline-block;
    max-width: 100%;
  }
  
  input[type='checkbox'] {
    display: none;
    box-sizing: border-box;
    padding: 0;
    outline: none;
    border: none;
    background: transparent;
    width: auto;
  }
  
  input[type='checkbox']:checked+.tick_mark {
    color: #16a0de;
  }
  
  input[type='checkbox']+span {
    cursor: pointer;
    font-weight: normal;
    font-size: 11px;
  }
  
  .tick_mark {
    border: 1px solid #666;
    padding: 0px 1px;
    color: white;
    margin: 6px 4px 6px 0;
    font-weight: normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
    &lt;input name="postSelected" class="NonUnSaved" id="chkBlog" type="checkbox" value="4"&gt;
    &lt;span class="tick_mark"&gt;&amp;#10004;&lt;/span&gt;
    &lt;span class="btntooltip" data-val="checkboxTest"&gt;Text 1&lt;/span&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>