On iphone double click is needed to enable checkbox

I'm having a hard time figuring out, why my custom checkboxes on my site needs to be clicked twice before it is actually enabled on my Iphone 4...

Any idea how to remove this behavior from iphones or is there something to be done with my code:

<input class="search-checkbox1" id="lejligheder" name="checkbox" type="checkbox">
<label class="search-labels" for="lejligheder">
    Lejlighed
    <div class="checkmark-wrap">
        <svg class="input-check-mark1">
            <use xlink:href="#checkmark-icon"></use>
        </svg>
    </div>
</label>

.search-checkbox1 {
  display: none;
}

.search-labels {
  appearance: none;
  background: #272727;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #272727), color-stop(100%, #1d1d1d));
  background: -webkit-linear-gradient(top, #272727 0%, #1d1d1d 100%);
  background: linear-gradient(to bottom, #272727 0%, #1d1d1d 100%);
  color: #fff;
  text-transform: uppercase;
  width: 30%;
  height: 35px;
  line-height: 35px;
  vertical-align: middle;
  padding: 0 5px 0 5px;
  margin-left: 2.5%;
  float: left;
  font-size: 0.625rem;
  border-radius: 5px;
  cursor: pointer;
}

.checkmark-wrap {
  width: 14px;
  height: 14px;
  float: right;
  margin-top: 10px;
  background: #38383b;
  position: relative;
}

.input-check-mark1 {
  width: 11px;
  height: 11px;
  position: absolute;
  fill: #272727;
  left: 2px;
  top: 1px;
}

Link to test on phone: "http://ift.tt/1E5NKUI"

Cheers