如何增加触摸屏复选框的可点击区域

Question

我正在尝试增加标签中复选框的可点击区域。

但是，其中还有 2 个锚标记，当我尝试单击平板电脑上的复选框时，我会被重定向到超链接，因为复选框的可单击区域很小，但锚标记的区域更大。

我需要让它们在平板电脑上都可以点击，但也可以点击复选框。

这是当前的布局：

由于我也不能将 :before 作为 jQuery 上的一个 DOM 元素，所以我也不能修改它。 有什么建议吗？

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    background: transparent;
}

<label class="form-label checkout-label">
 <span class="form-label-forced-span">
 I agree with the <a href="$url('Page-Show', 'cid', 'policy-link')$" 
 target="_blank" aria-label="confidentiality and protection 
 policy">confidentiality and protection policy</a> and <a href="$url('Page- 
 Show', 'cid', 'terms-and-uses')$" target="_blank" aria-label="the terms of use">the 
 terms of use</a>.
 </span>
</label>

Answer 1

我不明白 peudo 元素在标签前产生正方形的原因...

我建议你使用一些@media 规则来根据屏幕大小更改复选框大小：

@media screen and (max-width: 736px){
  [type="checkbox"]{
    width: 2em;
    height: 2em;
    transform: translateY(0.5em);  /* To move it down a bit... */
  }
}

<input type="checkbox">
<label class="form-label checkout-label">
  <span class="form-label-forced-span">
    I agree with the <a href="$url('Page-Show', 'cid', 'policy-link')$" 
                        target="_blank" aria-label="confidentiality and protection 
      policy">confidentiality and protection policy</a> and <a href="$url('Page- 
      Show', 'cid', 'terms-and-uses')$" target="_blank" aria-label="the terms of use">the 
    terms of use</a>.
  </span>
</label>

在小于 736 像素的屏幕上，这将使复选框大小“加倍”。看看common breakpoints。

---

编辑
从您的代码...如果您使用margin-top 和margin-left，而不是top 和left 来定位伪元素，它工作得很好。

看这里：

.container{
  width:90%;
  margin: 0 auto;
}

[type="checkbox"]:not(:checked)+label:before,
[type="checkbox"]:checked+label:before {
  content: '';
  position: absolute;
  /*left: 0;
  top: 1px;*/

  margin-left: -2.5em;
  margin-top: -1em;

  width: 3em;
  height: 3em;
  border: 1px dotted red;
  background: transparent;
}

<div class="container">
  <br>
  <br>
  <br>
  <input type="checkbox" id="acceptPolicy">
  <label class="form-label checkout-label" for="acceptPolicy">
    <span class="form-label-forced-span">
      I agree with the <a href="$url('Page-Show', 'cid', 'policy-link')$" 
                          target="_blank" aria-label="confidentiality and protection 
        policy">confidentiality and protection policy</a> and <a href="$url('Page- 
        Show', 'cid', 'terms-and-uses')$" target="_blank" aria-label="the terms of use">the 
      terms of use</a>.
    </span>
  </label>
</div>

我在标签上添加了for= 属性...
我还向其中添加了一个容器，只是为了将标签向右“移动”一点。我更改边框颜色只是为了好玩。