html - 单击 两次选择文本而不是切换 einput

Question

我在标签元素中有一个输入元素(不想使用 id):

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

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

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

这是一个演示问题的 fiddle :http://jsfiddle.net/soLuwwy3/

Answer 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/