(HTML & CSS) Как скрыть флажок, все еще будучи в состоянии проверить изображение

Question

Я создал флажок, который имеет пользовательское фоновое изображение.Я хочу скрыть флажок, но всякий раз, когда я это делаю, я не могу его установить.

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;
}

Я ожидаю, что флажок будет скрыт и все еще может щелкнуть «tasks.png», чтобы установить флажок, однако это приводит к тому, что флажок не может быть установлен.

Answer 1

Ваш <label> элемент не имеет размеров.

Кроме того, я не уверен, к какому элементу tasks.png относится.

#togglearrow {
  display: none;
}

.arrow {
  position: relative;
  display: block;
  background: url('https://unsplash.it/100') no-repeat;
  background-size: 65%;
  height: 35px;
  bottom: 0;
}

.arrowmenu {
  position: absolute;
  background: url('https://unsplash.it/300') no-repeat;
  background-size: 65%;
  height: 35px;
  bottom: 0;
  right: 20px;
}

label[for="togglearrow"] {
      display: block;
      cursor: pointer;
      width: 40px;
      height: 100%;
      border: 1px solid yellow;
}

#togglearrow:checked + .arrowmenu {
      display: block;
      bottom: 0;
      left: 50px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
}

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

---