(HTML & CSS) How to hide checkbox while still being able to check image

I've been creating a checkbox that has a custom background image. I want to hide the checkbox, but whenever I do I am unable to check it.

HTML:

<div class="arrow">
  <label for="togglearrow"></label>
  <input type='checkbox' id="togglearrow"/>
  <div class="arrowmenu"></div>
</div>

CSS:

#togglearrow {
  display: none;
  cursor: pointer;
}

.arrow {
  position: absolute;
  display: block;
  background: url('arrow.png') no-repeat;
  background-size: 65%;
  height: 35px;
  bottom: 0;
}

.arrowmenu {
  position: absolute;
  background: url('test.png') no-repeat;
  background-size: 65%;
  height: 35px;
  bottom: 0;
  right: 20px;
}

label[for="togglearrow"] {
      display: block;
      cursor: pointer;
}
#togglearrow:checked + .arrowmenu {
      display: block;
      bottom: 0;
      left: 50px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
}

I expect that the checkbox will be hidden and can still click on "tasks.png" to check the box, however, it results in the checkbox not being able to be checked.