【问题标题】：CSS rule to disable highlighting table column upon selection选择时禁用突出显示表列的 CSS 规则
【发布时间】：2013-03-23 04:36:38
【问题描述】：

背景

希望禁用突出显示表格的第一列。

HTML 源代码

<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 源代码

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

小提琴

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

问题

当用户在表格上选择并拖动鼠标按钮时，按钮文本 (✘) 会突出显示（不希望出现的行为）。当用户复制和粘贴值时，值 (✘) 不包括在内（期望的行为）。

为了澄清，这是当前的行为（不希望的）：

下图显示了在表格上拖动鼠标后所需的行为：

大多数用户可能不会在意，但这是一种略微误导的用户体验。无论用户突出显示文本并复制它，都希望复制所有突出显示的文本。通过添加unselectable 类，按钮的 (✘) 值会突出显示，但不会被复制。用户根本不应该能够突出显示（选择）（✘）因为它被设置为unselectable。

环境

我在 Xubuntu 上使用 Firefox 19.0.2，但我寻求跨浏览器的解决方案。

问题

防止用户突出显示第一列（包含按钮）的跨浏览器方法是什么？

相关

【问题讨论】：

我不太确定你的问题是什么？您不想在单击时出现蓝色突出显示吗？
@MitchellLayzell 尝试复制并粘贴他的表格，你就会明白他的意思。
你试过这个stackoverflow.com/a/1224550/1468180吗？

标签： css select html-table cross-browser highlight

【解决方案1】：

只是一种解决方法

到目前为止，我只找到了一个相当不方便的解决方法。它隐藏了unselectable 元素中的所有“实际”文本，并通过:before 伪元素将其替换为伪文本。注意：如果不需要在 html 中实际包含“实际”文本，则可以消除下面嵌套的 span 元素（以及因此一些冗余的 html）和关联的 css，但这一切都取决于“重要程度” " 文本在您的实际应用程序中（用于屏幕阅读器、搜索引擎等）。

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);
}

【讨论】：

虽然我正在微调灵活性，但@ExplosionPills 在伪元素答案上击败了我 :-)。

【解决方案2】：

如果内容是通过content CSS 规则设置的，浏览器似乎不会复制内容。希望你不需要支持 IE7

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

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

【讨论】：