CSS规则在选择时禁用突出显示表格列
背景
希望禁用突出显示表格的第一列。
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;
}
小提琴
http://jsfiddle.net/2LQfg/1/
问题
当用户在桌面上选择并拖动鼠标按钮时,按钮文本(✘)会突出显示(不需要的行为)。 当用户复制并粘贴这些值时,值(✘)不包含(希望的行为)。
澄清,这是目前的行为(不希望的):
下图显示了在整个表格上拖动鼠标后所需的行为:
大多数用户可能不会在意,但这是一个有点误导性的用户体验。 无论用户如何突出显示文本并将其复制,预计都会复制所有突出显示的文本。 通过添加unselectable
类,按钮(✘)值被高亮显示,但它不会被复制。 用户只需不应该是能够凸显(选择),因为它被设置为(✘) unselectable
。
环境
我在Xubuntu上使用Firefox 19.0.2,但我寻求一种跨浏览器的解决方案。
题
什么是防止用户突出显示第一个表格列(包含按钮)的跨浏览器方式?
有关
如果通过content
CSS规则设置内容,浏览器似乎不会复制内容。 希望你不需要支持IE7
button.unselectable:after {
content: "2718";
}
http://jsfiddle.net/ExplosionPIlls/2LQfg/50/
只是一个解决方法
到目前为止,我只找到一个相当不方便的解决方法。 它将所有“实际”文本隐藏在不unselectable
元素中,并通过伪前缀:before
伪元素将其替换为伪文本。 注意:如果没有必要在html中真正拥有“实际”文本,那么嵌套的span
元素(以及一些冗余的html)和下面相关的css可以被消除,但这一切都取决于“重要”文本在您的真实应用程序中(用于屏幕阅读器,搜索引擎等)。
小提琴的例子。
HTML
<table>
<tbody>
<tr><td><button value="1"><div class="unselectable" data-content="✘"><span>✘</span></div></button></td><td>Row 1</td></tr>
<tr><td><button value="2"><div unselectable="on" class="unselectable" data-content="✘"><span>✘</span></div></button></td><td>Row 2</td></tr>
<tr><td><button value="3"><div unselectable="on" class="unselectable" data-content="✘"><span>✘</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);
}
链接地址: http://www.djcxy.com/p/12617.html
上一篇: CSS rule to disable highlighting table column upon selection
下一篇: write multiple stdin