扩展复选框的检查区域答案

【问题标题】：Extend check zone of a checkbox扩展复选框的检查区域
【发布时间】：2018-11-02 11:42:15
【问题描述】：

我正在编写一个带有两个复选框的菜单（来自 Angular 的 mat-menu 带有本机 Javascript 复选框），如果我没有在不起作用的框中准确单击，则菜单正在关闭且未选中该框...

顺便说一下mat-menu我还没有找到当我点击它时如何阻止菜单自动关闭。

你有解决办法吗？

<!-- app.component.html -->

<div class="header">
  <mat-toolbar color="warn">OpenLayers</mat-toolbar>

  <div class="menu">
    <button mat-button [matMenuTriggerFor]="menu">Marqueurs</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <p>Piscines : <input type="checkbox" id="piscine" name="piscine" (change)="handleSelected1($event)"/></p>
      </button>
      <button mat-menu-item>
        <p>Parkings : <input type="checkbox" id="parking" name="parking" (change)="handleSelected2($event)"/></p>
      </button>
    </mat-menu>
  </div>
</div>

【问题讨论】：

在问题中显示相关标记。
所以你没有使用标签？
我无法附上我的菜单的截图，但我的菜单上有两个复选框，旁边有它们的标签，我希望我们也可以通过单击标签来选中该框，不一定完全在盒子上
请见谅！现在可以用了，非常感谢！！
没问题，我很高兴它成功了。 :)

标签： javascript html css angular checkbox

【解决方案1】：

这是使用 CSS :after 伪元素扩展复选框区域的简单方法：

p, label, button, .chk-extended{
  position: relative;
}

/* The above element position will be taken as reference
   for the pseudo-element absolute positioning below:
*/

.chk-extended:after,
.chk-over-elm:after{
  position: absolute;
  content: '';
  border: 1px dotted gray; /* For visibility */
  /* The below can be adjusted */
  top: -0.5em;
  bottom: -0.5em;
  left: -0.5em;
  right: -0.5em;
}

Regular:<input type="checkbox" />
<br><br>
Extended:<input class='chk-extended' type="checkbox" />
<br><br>
<label>Extended on label:<input class='chk-over-elm' type="checkbox" /></label>
<br><br>
<button>Extended on button:<input class='chk-over-elm' type="checkbox" /></button>
<br>
<p>Extended on p:<input class='chk-over-elm' type="checkbox" /></p>

请注意，我在我的 sn-p 中使用了p、label、button 作为示例，但它可以与其他任何东西一起使用。
此外，您可能需要在 CSS 规则上使用 !important 来覆盖已设置的规则。

希望对你有帮助。

【讨论】：