Question

我有label“for="the pointer to the checkbox input"”，只要我知道，for只能添加label。因此，我需要添加label一个<button>（我需要它），但点击事件无法正常工作 - 它不会选中for的复选框指向。

如果我必须将<button>置于label，仅使用html + css 编码，我可以在此处使用哪些可能性？

例如，

一些代码：

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

Answer 1

事实证明，您可以让<button>操作输入，但前提是您将<label> 放在 <button>内。

＆＃13;

<button type="button">
  <label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">

＆＃13;

虽然这违反了W3C规范：

交互式元素标签不得显示为按钮元素的后代。 https://www.w3.org/TR/html-markup/label.html

Answer 2

你可以这样做：

<label>
 <button></button>
</label>

CSS

label {
    cursor: pointer; // not necessary but probably a good idea.
    display: block; // depending on your structure.
}
button {
    pointer-events: none;
}

标签上的 display: block 只需要标签的边界框完全封装它的子项（在本例中为按钮）。

Answer 3

您可以使用覆盖复选框的透明伪元素和捕获鼠标事件的按钮本身。

以下是一个例子：

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;
}

Answer 4

最好的解决方案是样式就像一个按钮。

如果你正在使用CSS框架，比如bootstrap，你可以给出标签类，如btn和btn-default。这样就像按钮一样。您可能需要手动调整行高的css属性，如下所示：

label.btn {
    line-height: 1.75em;
}

然后，要将点击样式作为按钮获取，请添加以下样式：

input[type=radio]:checked ~ label.btn {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

这将获取已检查的输入，并在dom中提供具有类btn，bootstrap btn-default按钮单击样式的下一个label元素。调整颜色适合。

Answer 5

HTML：

<label for="whatev"
       onclick="onClickHandler">
    <button>Imma button, I prevent things</button>
</label>

JS：

const onClickHandler = (e) => {
    if(e.target!==e.currentTarget) e.currentTarget.click()
}

目标是点击目标，在这种情况下，currentTarget是标签。

如果没有if语句，如果在事件阻止区域外单击，则会触发两次事件。

未通过浏览器测试。

Answer 6

我要做的是以下事情：

gcloud functions deploy

标签内的按钮

6 个答案: