Click on a twice select the text instead of toggling the einput

Question

I've got an input element inside a label element (don't want to use id):

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

It all works well, but when I'm clicking the label twice in a row, trying toggling the input on and off, it works only for the first click. The second one is just 'selecting' the elements on screen.

How can I prevent this behaviour? I want to give the label a native feel, like clicking on the real thing.

Here's a fiddle that demonstrates the issue: http://jsfiddle.net/soLuwwy3/

you could use -webkit-user-select:none; and browser equivalents on your span but then you won't be able to select the text — webkit, Sep 10 '14 at 08:12
See this [answer](http://stackoverflow.com/questions/12315476/how-to-disable-selection-of-text-on-a-web-page). Updated your [fiddle](http://jsfiddle.net/soLuwwy3/2/) — Rohith, Sep 10 '14 at 08:12

Michael Cera · Accepted Answer · 2014-09-10T08:22:36.727

4

few lines of css will do this for you:

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+ */
}

your jsfiddle edited: http://jsfiddle.net/soLuwwy3/5/

edited Sep 10 '14 at 08:22

answered Sep 10 '14 at 08:13

Michael Cera

143
1
11

Sajad Karuthedath · Answer 2 · 2014-09-10T08:26:19.520

2

To make your span text not selectable use user-select: none.

more info user-select

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

DEMO

edited Sep 10 '14 at 08:26

answered Sep 10 '14 at 08:13

Sajad Karuthedath

14,987
4
32
49

1

@Harry:no need of it,just none is enough,its a typo error – Sajad Karuthedath Sep 10 '14 at 08:26

Click on a twice select the text instead of toggling the einput

2 Answers2