背景
希望禁用突出显示表的第一列.
HTML来源
<table> <tbody> <tr><td class="unselectable" unselectable="on"><button value="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="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="3" unselectable="on" class="unselectable"><div unselectable="on" class="unselectable">✘</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; }
小提琴
问题
当用户选择并在表格上拖动鼠标按钮时,按钮文本(✘)将突出显示(不良行为).当用户复制并粘贴值时,不包括值(✘)(所需行为).
澄清一下,这是当前的行为(不受欢迎的):
下图显示了在表格中拖动鼠标后所需的行为:
大多数用户可能不会关心,但这是一种有点误导性的用户体验.无论用户突出显示文本并将其复制,都应该复制所有突出显示的文本.通过添加不可选择的类,按钮的(✘)值会突出显示,但不会被复制.用户根本不应该突出显示(选择)(✘)因为它被设置为不可选择.
环境
我在Xubuntu上使用Firefox 19.0.2,但我寻求跨浏览器解决方案.
题
什么是跨浏览器方式来阻止用户突出显示第一个表列(包含按钮)?
有关
> 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/