chasityrcolantror
New Member
BackgroundLooking to disable highlighting a table's first column.HTML Source\[code\]<table><tbody> <tr><td class="unselectable" unselectable="on"><button value="http://stackoverflow.com/questions/15754704/1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 1</td></tr> <tr><td class="unselectable" unselectable="on"><button value="http://stackoverflow.com/questions/15754704/2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 2</td></tr> <tr><td class="unselectable" unselectable="on"><button value="http://stackoverflow.com/questions/15754704/3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</div></button></td><td>Row 3</td></tr></tbody></table>\[/code\]CSS Source\[code\]*.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none;}\[/code\]Fiddlehttp://jsfiddle.net/2LQfg/1/ProblemWhen the user selects and drags the mouse button over the table, the button text (✘) appears highlighted (undesired behaviour). When the user copies and pastes the values, the value (✘) is not included (desired behaviour).To clarify, this is the current behaviour (undesired):
The following image shows the desired behaviour after dragging the mouse across the table:
Most users probably will not care, but it is a slightly misleading user experience. Whatever a user highlights text and copies it, it is expected that all highlighted text is copied. By adding the \[code\]unselectable\[/code\] class, the buttons' (✘) value is highlighted, but it will not be copied. The user simply should not be able to highlight (select) the (✘) because it is set to \[code\]unselectable\[/code\].EnvironmentI am using Firefox 19.0.2 on Xubuntu, but I seek a cross-browser solution.QuestionWhat is a cross-browser way to prevent the user from highlighting the first table column (containing the buttons)?Related