CSS规则,用于在选择时禁用高亮显示表列 出身背景
正在查看是否禁用高亮显示表的第一列 HTML源 不停摆弄 问题 当用户在表格上选择并拖动鼠标按钮时,按钮文本✘ 突出显示不希望出现的行为。当用户复制和粘贴值时,值✘ 不包括期望的行为 澄清一下,这是当前不希望出现的行为: 下图显示了在表格上拖动鼠标后所需的行为: 大多数用户可能不会在意,但这是一种有点误导性的用户体验。无论用户突出显示文本并进行复制,都会复制所有突出显示的文本。通过添加不可选择的类,按钮✘ 值高亮显示,但不会复制它。用户不应该突出显示“选择”选项✘ 因为它被设置为不可选择 环境 我在Xubuntu上使用Firefox19.0.2,但我寻求一种跨浏览器的解决方案 问题 什么是跨浏览器方式来防止用户突出显示包含按钮的第一个表格列 相关的CSS规则,用于在选择时禁用高亮显示表列 出身背景,css,select,html-table,cross-browser,highlight,Css,Select,Html Table,Cross Browser,Highlight,正在查看是否禁用高亮显示表的第一列 HTML源 不停摆弄 问题 当用户在表格上选择并拖动鼠标按钮时,按钮文本✘ 突出显示不希望出现的行为。当用户复制和粘贴值时,值✘ 不包括期望的行为 澄清一下,这是当前不希望出现的行为: 下图显示了在表格上拖动鼠标后所需的行为: 大多数用户可能不会在意,但这是一种有点误导性的用户体验。无论用户突出显示文本并进行复制,都会复制所有突出显示的文本。通过添加不可选择的类,按钮✘ 值高亮显示,但不会复制它。用户不应该突出显示“选择”选项✘ 因为它被设置为不可选择 环境
如果内容是通过内容CSS规则设置的,浏览器似乎不会复制内容。希望您不需要支持IE7
button.unselectable:after {
content: "\2718";
}
只是一个解决办法
到目前为止,我只找到了一个不太方便的解决方法。它隐藏不可选择元素中的所有实际文本,并通过:before伪元素将其替换为伪文本。注意:如果html中不需要实际的文本,那么可以消除嵌套的span元素,从而消除下面的一些冗余html和相关css,但这取决于文本在屏幕阅读器、搜索引擎等实际应用程序中的重要性
HTML
我不太确定你的问题是什么?你不想在点击时出现蓝色突出显示?@Mitchellayzell尝试复制并粘贴他的表,你会明白他的意思。你尝试过这个吗?当我微调灵活性时,@ExplosionPills击败我得到伪元素答案:-。
*.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;
}
button.unselectable:after {
content: "\2718";
}
<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>
*.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);
}