title: CSS: Custom Checkbox doesn't work
body: <p>I changed my checkboxes with the help of css, it work in Chrome, but not in i.e and edge. So, I found this reference: <a href="https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css">ref</a></p>
  
  <p>This is my code:</p>
  
  <pre><code>.checkbox-style {
     display: none;
  }
  
  .checkbox-style + label {
      position: relative;
      display: block;
      width: 14px;
      height: 14px;
      border: 1px solid #C0C5C9;
      content: "";
      background: #FFF;
      align-items: center;
  }
  
  .checkbox-style[type="checkbox"]:checked + label:before {
      font-family: 'FontAwesome' !important;
      content: "\f00c";
      border: none;
      color: #015CDA;
      font-size: 12px;
      -webkit-text-stroke: medium #FFF;
      margin-left: -11px;
  }
  </code></pre>
  
  <p>And this is the html:</p>
  
  <pre><code>&lt;span class="checkbox-wrapper" role="presentation"&gt; &lt;input type="checkbox" class="checkbox-style"&gt;&lt;label&gt;&lt;/label&gt;&lt;/span&gt;
  </code></pre>
  
  <p>The checkbox is appear like I wanted but the :before of the label is not creating when I click on the checkbox. So, my checkboxes are not checkable. Why?</p>