CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了CSS规则在选择时禁用突出显示表列大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
背景

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

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/

问题

当用户选择并在表格上拖动鼠标按钮时,按钮文本(✘)将突出显示(不良行为).当用户复制并粘贴值时,不包括值(✘)(所需行为).

澄清一下,这是当前的行为(不受欢迎的):

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

大多数用户可能不会关心,但这是一种有点误导性的用户体验.无论用户突出显示文本并将其复制,都应该复制所有突出显示的文本.通过添加不可选择的类,按钮的(✘)值会突出显示,但不会被复制.用户根本不应该突出显示(选择)(✘)因为它被设置为不可选择.

环境

我在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/

解决方法

如果通过内容CSS规则设置,浏览器似乎不会复制内容.希望您不需要支持IE7
button.unSELEctable:after {
    content: "\2718";
}

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

大佬总结

以上是大佬教程为你收集整理的CSS规则在选择时禁用突出显示表列全部内容,希望文章能够帮你解决CSS规则在选择时禁用突出显示表列所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。