html - (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>

---