3

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

但是，其中还有 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>
4

1 回答 1

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 像素的屏幕上，这将使复选框大小“加倍”。看看常见的断点。

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

看这里：

.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=在标签上添加了属性......
我还添加了一个容器，只是为了将标签“移动”到右边一点。我改变了边框颜色只是为了好玩。

于 2019-03-30T20:04:16.527 回答