Question

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

Answer 1

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.