我正在构建一个包含一些文本元素的HTML UI,例如选项卡名称,这些元素在选中时看起来很糟糕.不幸的是,用户很容易双击选项卡名称,默认情况下会在许多浏览器中选择它.
我或许可以通过JavaScript技巧来解决这个问题(我也希望看到这些答案) - 但我真的希望CSS/HTML中的某些东西直接适用于所有浏览器.
在大多数浏览器中,这可以使用CSS实现:
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
对于IE <10和Opera,您需要使用unselectable
您希望不可选择的元素的属性.您可以使用HTML中的属性进行设置:
...
遗憾的是,这个属性不是继承的,这意味着你必须在一个内部的每个元素的开始标记中放置一个属性 编辑 代码显然来自http://www.dynamicdrive.com 所有正确的CSS变体都是: 试试这个: 简单但有效......适用于所有主流浏览器的当前版本. 对于Firefox,您可以将CSS声明"-moz-user-select"应用于"none".查看他们的文档,用户选择. 这是他们所说的未来"用户选择"的"预览",因此基于Opera或WebKit的浏览器可能会支持它.我还记得为Internet Explorer找到了一些东西,但我不记得是什么:). 无论如何,除非是特定的情况,文本选择使一些动态功能失败,你不应该真正覆盖用户期望从网页,并且能够选择他们想要的任何文本. 我发现这里描述的CSS有一定程度的成功http://www.quirksmode.org/css/selection.html: 它解决了我 绝对地将文本区域上的div放在z-index较高的位置,并为这些div提供透明的GIF背景图形. 注意一点 - 你需要将这些'封面'链接起来,所以点击它们会把你带到选项卡所在的位置,这意味着你可以/应该将锚元素设置为function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
你可以使用这个选择器[unselectable = on] {...}然后你避免增加额外的类
2> dimarzionist..:
事实上,你在所有情况下都在改变它(缩进是误导性的)
3> Blowsie..:-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
4> Stephen M. R..:
完美地为我们的应用程序工作(我们只针对IE用户).
5> Jorge Alves..:
同样在Safari/Chrome /等.-khtml-用户选择:无;
6> jlleblanc..:::selection {
background-color: transparent;
}
ul
在AIR应用程序(WebKit引擎)中使用一些ThemeRoller 元素时遇到的大多数问题.仍然会得到一个小的(大约15 x 15)虚拟补丁被选中,但之前选择了一半的页面.
7> Dave Rutledg..:display:box
,宽度和高度设置以及透明背景图像.
这种黑客很可怕.我会亲自避免它.
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有