标签内的按钮

我有一个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>

来源

2016-05-28 nikoletta

所以实际的问题是，如何通过单击按钮来切换复选框？我不知道这个问题的非JS答案。它可能不起作用，因为该按钮捕获自己的点击并且根本不会将其传递给标签。我真的不知道为什么你想要这首先。这听起来像是对我非常混淆的用户体验。如果您确实想继续操作，您可以考虑将元素设计为按钮式外观。 – GolezTrol

是的，只是试图给尽可能多的信息，我可以 – nikoletta

请提供您的代码，以及为什么你需要有一个'标签'包装一个'按钮'？ – dippas

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

下面是一个例子：

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

来源

2016-05-28 22:59:29 eboye

我知道你的意思是朋友，即使你的代码错了一点，但我想关于这个想法。这是不好的，我需要'

我不认为这是可能的，你正在尝试做什么。要在单击时触发两个事件（标签单击事件和按钮单击事件）。这是其中之一。在这种情况下，你必须使用JavaScript。 – eboye

我建议你应该用正常的方式使用复选框，并使用CSS样式使它看起来像按钮因为我不认为你需要一个按钮，你只是想获得按钮的外观和按钮是有用作按钮它将是坏的HTML验证也应该总是的使用因为他们是

来源

2016-05-29 00:56:58 ashutosh

做的目的标签事实证明，你可以做一个<button>操作的输入，但只有当你把<label>内的<button>。

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

虽然这违反了W3C规范：

交互元素标签不得出现该按钮元素的后裔。 https://www.w3.org/TR/html-markup/label.html

来源

2016-09-13 21:32:13 Sinetheta

问题在于如果你点击按钮，而不是文字，标签不会触发点击。 – epascarello

我认为，如果你处于按钮内部粘贴标签的世界，你应该准备好需要一些CSS;） – Sinetheta

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语句，如果在事件阻止区域之外单击事件，则会触发两次事件。

未跨浏览器测试。

来源

2017-06-22 10:00:55

最好的解决方案是风格就像一个按钮。

如果您使用CSS框架（如引导程序），则可以提供标签类，如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按钮单击样式。调整颜色以适合。

来源

2017-08-10 11:19:51

标签内的按钮

回答

相关问题