0

Below I have a checkbox which is styled like a button:

 echo '<p>';
 foreach($options as $indivOption) {
     echo '<div id="ck-button"><label><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
 }
  echo '</p>';

Now what happens is that if I click on the checkbox button quickly twice, it turns on the button but then it does not turn it off, it instead does a little text selection on the button. So if I have button known as E, if I click it twice quickly, it turns the button on and then it highlights the letter E.

My question is that for only the checkbox buttons, how in javascript as I assume it is client side to sort this out, how to prevent the text selection from happening only for the checkbox buttons, not for the whole document.

Thanks

user2048994
  • 270
  • 4
  • 14
  • CSS styles to prevent selection are listed [here](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting). Maybe that will help. – showdev Feb 08 '13 at 22:51
  • 1
    It could be easier to read if you put the generated code, instead of the php code – Byscripts Feb 08 '13 at 22:52
  • 1
    Why not just make it a real button that updates a hidden checkbox, since that's what you really want? – Kevin B Feb 08 '13 at 22:55

1 Answers1

3

Apply this style to the check buttons (or, in your case, the div containing the check buttons):

#ck-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

For browsers < IE10, add the property onselectstart="return false;" to the ck-button div.

Elliot Bonneville
  • 51,872
  • 23
  • 96
  • 123