CSS rule to disable highlighting table column upon selection

Question

Background

Looking to disable highlighting a table's first column.

HTML Source

<table>
<tbody>
    <tr><td class="unselectable" unselectable="on"><button value="1" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 1</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="2" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 2</td></tr>
    <tr><td class="unselectable" unselectable="on"><button value="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">&#x2718;</div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS Source

*.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;
}

Fiddle

http://jsfiddle.net/2LQfg/1/

Problem

When 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 unselectable 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 unselectable.

Environment

I am using Firefox 19.0.2 on Xubuntu, but I seek a cross-browser solution.

Question

What is a cross-browser way to prevent the user from highlighting the first table column (containing the buttons)?

Related

• How to disable text selection highlighting using CSS?
• Is there a way to make a DIV unselectable?
• Imitate "onselectstart=return false" using CSS or other non-JS approach?
• http://www.mindfiresolutions.com/Using-of-onselectstart-and-its-alternative-for-Firefox-239.php
• http://therelentlessfrontend.com/2010/02/13/how-to-disable-text-selection-in-a-table/

Answer 1

Browsers won't seem to copy the content if it's set via the content CSS rule. Hopefully you don't need to support IE7

button.unselectable:after {
    content: "\2718";
}

http://jsfiddle.net/ExplosionPIlls/2LQfg/50/

Answer 2

Just a Workaround

So far I have only found a rather inconvenient workaround for this. It hides all the "actual" text in the unselectable element and replaces it with pseudo-text through a :before pseudo-element. Note: if there is no need to actually have "actual" text in the html, then the nested span elements (and therefore some of the redundant html) and associated css below can be eliminated, but that all depends on how "important" the text is in your real application (for screen readers, search engines, etc.).

Fiddle example.

HTML

<table>
<tbody>
    <tr><td><button value="1"><div class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 1</td></tr>
    <tr><td><button value="2"><div unselectable="on"   class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 2</td></tr>
    <tr><td><button value="3"><div unselectable="on"  class="unselectable" data-content="&#x2718"><span>&#x2718;</span></div></button></td><td>Row 3</td></tr>
</tbody>
</table>

CSS

*.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;
}

*.unselectable span {
    display: none;
}

*.unselectable:before {
    content: attr(data-content);
}