单击 <label> 两次选择文本而不是切换电子输入答案

【问题标题】：Click on a <label> twice select the text instead of toggling the einput单击 <label> 两次选择文本而不是切换电子输入
【发布时间】：2014-09-10 08:03:30
【问题描述】：

我在标签元素中有一个输入元素（不想使用 id）：

<label class="inline-block-class">
    <input type="radio/checkbox" class="hidden-class" />
    <span><img src="mimic-input-element.png" /> some text</span>
</label>

一切正常，但是当我连续两次单击标签，尝试打开和关闭输入时，它仅适用于第一次单击。第二个只是“选择”屏幕上的元素。

如何防止这种行为？我想给标签一种原生的感觉，就像点击真实的东西一样。

这是一个演示问题的小提琴：http://jsfiddle.net/soLuwwy3/

【问题讨论】：

你可以使用 -webkit-user-select:none;和浏览器等效项，但您将无法选择文本
见answer。更新了您的fiddle

标签： html css input label

【解决方案1】：

几行 css 将为您完成此操作：

label span {
    background: yellow;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

您的 jsfiddle 已编辑： http://jsfiddle.net/soLuwwy3/5/

【讨论】：

【解决方案2】：

要使您的跨度文本不可选，请使用user-select: none。

更多信息user-select

label span {
    background: yellow;
    -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

DEMO

【讨论】：

@Harry：不需要，没有就够了，是错字