标签内的按钮 [英] Button inside a label

问题描述

我有一个标签与 for =复选框输入的指针，我知道，只能为标签添加。因此，我需要添加标签 a < button> 事件无法正常工作 - 它不选中为指向的复选框。

I have a label with "for="the pointer to the checkbox input"" and as long as I know, this for can be added only for label. Therefore, I need to add inside of the label a <button>(I need it), but the click event isn't working properly - it doesn't check the checkbox the for is pointing to.

如果我必须在<$ c $里面放置< button>

一些代码，例如：

<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>

推荐答案

您可以使用覆盖复选框的透明伪元素，

You can use transparent pseudo element that overlays the checkbox and the button itself that will catch mouse events.

这里有一个例子：

html：

<label>
  <input type="checkbox">
  <button class="disable">button</button>
</label>

css：

.disable{pointer-events:fill}
label{position:relative}
label:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

这篇关于标签内的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！