Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 6 down vote favorite

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):

Undesired

The following image shows the desired behaviour after dragging the mouse across the table:

Desired

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

share|improve this question
I'm not quite sure what your question is? you don't want to have the blue highlight when it is clicked? – Mitchell Layzell Apr 2 at 2:19
@MitchellLayzell try to copy and paste his table and you'll get what he means. – He Hui Apr 2 at 2:31
1  
Have you tried this stackoverflow.com/a/1224550/1468180? – fapDaddy Apr 2 at 3:15

2 Answers

up vote 1 down vote accepted

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/

share|improve this answer
Thank you very much. – Dave Jarvis Apr 2 at 3:21
up vote 1 down vote

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);
}
share|improve this answer
Thank you, Scott. This is a great, flexible answer. – Dave Jarvis Apr 2 at 3:26
While I was fine tuning the flexibility, @ExplosionPills beat me to the pseudo-element answer :-). – ScottS Apr 2 at 3:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.