title: Checkbox unclickable on MS Edge
body: <p>The following radio button can be selected and deselected in Firefox and Chrome but not in MS Edge or IE11. What should I do to get it working on these browsers as well?</p>
  
  <p>I have tried following a couple of tricks  from here but none of it works:  <a href="https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/" rel="nofollow noreferrer">https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/</a></p>
  
  <pre><code>&lt;div class="ig-btn"&gt;
              &lt;div class="text-center click-to"&gt;Click to &lt;br&gt;
                &lt;span class="join"&gt;JOIN&lt;/span&gt;
              &lt;/div&gt;
              &lt;div style="position: absolute;"&gt;
                &lt;div class="checkbox text-center"&gt;
                  &lt;label for="user_remember_me" class="i-checks"&gt;
                &lt;input id="user_remember_me" name="sign_up_private[]" type="checkbox" value="&lt;?php echo bp_get_group_id(false)?&gt;"&gt;
                &lt;input name="user[remember_me]" type="hidden" value="0"&gt;&lt;i&gt;&lt;/i&gt;
  
  
              &lt;/label&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>CSS for classes:</p>
  
  <pre><code>.ig-btn, .ig-img, .ig-para {
    float: left;
  }
  
  .ig-btn {
    background-color: #ccc;
    width: 113px;
    height: 240px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    color: #e59629;  
  }
  .join {
    font-size: 30px;
    margin-top: -10px;
    display: block;
  }
  
  .ig-btn .radio, .ig-btn .checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    top: 0;
    left: 37px;
  }
  .ig-btn .radio label, .ig-btn .checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
  .ig-btn .i-checks input {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
  }
  .ig-btn .checkbox input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
  }
  .ig-btn .i-checks input {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
  }
  .ig-btn input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
  }
  .ig-btn .i-checks input:checked+i {
    border-color: #e59629;
  }
  .ig-btn .i-checks&gt;i {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    margin-right: 4px;
    margin-left: -20px;
    line-height: 1;
    vertical-align: middle;
    background-color: #fff;
    border: 3px solid #e59629;
    border-radius: 20px;
  }
  .ig-btn .i-checks input:checked+i:before {
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background-color: #e59629;
    border-radius: 20px;
  }
  .ig-btn .i-checks&gt;i:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: transparent;
    content: "";
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
  }
  .i-checks input:checked+i {
    border-color: #e59629;
  }
  
  .i-checks input {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
  }
  .checkbox input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
  }
  .i-checks input {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
  }
  input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
  }
  .i-checks input:checked+i {
    border-color: #e59629;
  }
  .i-checks&gt;i {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    margin-right: 4px;
    margin-left: -20px;
    line-height: 1;
    vertical-align: middle;
    background-color: #fff;
    border: 2px solid #e59629;
    border-radius: 10px;
  }
  .i-checks input:checked+i::before {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    background-color: #e59629;
    border-radius: 10px;
  }
  .i-checks&gt;i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: transparent;
    content: "";
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  </code></pre>