Checkbox doesn't display as checked (CSS)

The checkboxes doesn't display as checked, after I've modified their appearances with CSS. The checkboxes does check though, since the values collects in the summary of the form. So it's just a matter of CSS I believe. Moreover, unchecked and hover states work(!), which makes it weirder to me.

Here's a snippet of the HTML code (it continues like this for each option).

                <!-- image gallery -->
                <div style="display:none;">
                  <div class="uifm-dcheckbox-item-gal-imgs">
                    <a data-inp17-opt2-index="0" href="http://ift.tt/2dYhyHG" class="uifm-dcheckbox-item-imgsrc" title="image 1" data-gallery=""> <img src="http://ift.tt/2dYhyHG"></a>
                  </div>
                </div>
                <canvas data-uifm-nro="0" width="100" height="100" class="uifm-dcheckbox-item-viewport"></canvas>
              </div>
            </div>
            <div data-backend="0" data-gal-id="blueimp-gallery5" data-opt-label="Val 2" data-opt-checked="0" data-opt-price="0" data-opt-qtyst="0" data-opt-qtymax="2" data-inp17-opt-index="1" data-toggle="tooltip" data-placement="bottom" data-html="true"
            title="Val 2" class="uifm-dcheckbox-item">
              <div class="uifm-dcheckbox-item-wrap">
                <div class="uifm-dcheckbox-item-chkst btn-default"> <i class="fa fa-square-o"></i> </div>
                <div style="display:none" class="uifm-dcheckbox-item-qty-wrap">
                  <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-value="decrease"> <span class="glyphicon glyphicon-minus"></span> </button>
                    </span> <span class="input-group-btn"> <input type="text" data-max="2" data-min="1" class="uifm-dcheckbox-item-qty-num" value="1"> </span> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-value="increase"> <span class="glyphicon glyphicon-plus"></span>                        </button>
                    </span>
                  </div>
                </div>
                <div class="uifm-dcheckbox-item-nextimg btn-primary"> <i class="fa fa-chevron-right"></i> </div>
                <div class="uifm-dcheckbox-item-previmg btn-primary"> <i class="fa fa-chevron-left"></i> </div>
                <div style="display: none;">
                  <input class="uifm-dcheckbox-item-chkval" name="uiform_fields[ui3brbw6kci][1]" type="checkbox" value=""> </div>

Here's my CSS modifications:

.uifm-dcheckbox-item-viewport {
  margin: -10px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uifm-dcheckbox-item-viewport:hover {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.uifm-dcheckbox-item-viewport input:checked {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

.fa.fa-square-o {
  visibility: hidden;
}

.uifm-dcheckbox-item-chkst.btn-default {
  visibility: hidden;
}

Probably it has something to do with :checked. I'm not a coder, so I'm using a 3rd party plug-in with Wordpress. I know this is possible with CSS3 only, since the code works by itself. Likely I've just missed something obvious.

Regards,