Question

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

但是，其中也有2个定位标记，当我尝试在平板电脑上单击复选框时，由于该复选框的可单击区域较小，但定位标记的区域较大，因此重定向到超链接。

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

这里是current layout。由于我也无法解决：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

我不知道伪元素在标签前产生一个正方形的原因...

我建议您使用一些@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=属性...
我还向其中添加了一个容器，只是将标签“移至”右侧。而且我只是为了好玩而更改了边框颜色。

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

1 个答案: