对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
对于 Internet Explorer 此外,您还需要添加 pseudo class focus (.ClassName:focus) 和 outline-style: none。
.ClassName,
.ClassName:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline-style: none; /* Internet Explorer */
}
其他回答
.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>
然而,这不是最好的方式。
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
如果您想使用 CSS 禁用整个页面的选择和突出,您可以轻松地将其应用到所有元素:
* {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
假设有两种类似的DIV:
.second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ -webkit-touch-callout: none; /* iOS Safari */ } <div class="first"> 这是我的第一个 div </div> <div class="second"> 这是我的第二个 div </div>
设置默认的路由器,以便它给用户一个不可选择的感觉。
预定必须用于支持它在所有浏览器. 没有预定,这可能不会在所有答案工作。
雖然這個假設元素在CSS Selectors Level 3的草案中,但在候選人推薦階段中被移除,因為它顯然他的行為被低估,特別是與<unk>化元素,並且互動性未達成。
它正在讨论在如何 :: 选择工作在无缝元素。
尽管它正在在浏览器中实施,但您可以通过使用相同的颜色和背景颜色来创建一个不被选择的文本的幻觉,与选项卡设计(在您的情况下)。
正常的CSS设计
p { color: white; background: black; }
关于选择
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
不允许用户选择文本会引发可用性问题。
