对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。
当然,这在不使用 Gecko 发射引擎的浏览器中不支持。
没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。
真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。
唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。
除了Mozilla唯一的属性,不,没有办法用标准CSS(如现在)禁用文本选项。
如果您注意到, Stack Overflow 不会关闭其导航按钮的文本选择,我建议在大多数情况下不这样做,因为它改变正常的选择行为,并使其与用户的期望相矛盾。
你可以在Firefox和Safari(Chrome也?)中做到这一点。
::selection { background: transparent; }
::-moz-selection { background: transparent; }
在大多数浏览器中,可以通过使用用户选择的CSS属性的属性变量来实现这一点,最初提出,然后在CSS 3中被遗弃,现在在CSS UI级别4中提出。
*.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in Internet Explorer 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
在 Internet Explorer < 10 和 Opera < 15 中,您需要使用您想要不可选择的元素的不可选择属性。
<div id="foo" unselectable="on" class="unselectable">...</div>
不幸的是,这个属性没有继承,这意味着你必须在 <div> 中每个元素的起点标签中放置一个属性,如果这是一个问题,你可以使用JavaScript以重复为元素的后代:
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"));
在某些浏览器(例如,Internet Explorer和Firefox)中,虽然不可能在未选择的元素中启动选项,但仍然不可能阻止在未选择的元素之前和之后开始的选项,而不会使整个文档不可选择。
更新2017年1月:
根据我可以使用,用户选择 + -webkit 用户选择为 Safari 足以实现所有主要浏览器所需的行为。
以下是所有可用的正确的CSS变量:
.noselect { _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
请注意,用户选择正在标准化过程中(目前在W3C工作草案中)。它不保证到处工作,浏览器之间可能存在实施差异。
更多信息可在 Mozilla Developer Network 文档中找到。
这个属性的价值是无,文本,条形,元素,元素,所有和继承。
如果您想要禁用除了 <p> 元素以外的任何内容的文本选项,您可以在 CSS 中这样做(请参阅 -moz-none 允许在子元素中过度排序,允许在其他浏览器中没有):
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
我喜欢Hybrid CSS + jQuery 解决方案。
要使 <div class="draggable"></div> 中的所有元素不可选择,请使用此 CSS:
.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.draggable input {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
然后,如果您正在使用 jQuery,请将其添加到 $(文件)。ready() 区块中:
if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');
我猜你仍然想要任何输入元素是互动的,因此 :not() pseudo-selector. 你可以使用“*”而不是如果你不在乎。
Caveat: Internet Explorer 9 可能不需要此额外的 jQuery 件,所以您可能想在那里添加一个版本检查。
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
-webkit-user-select: none;
-moz-user-select: none;
onselectstart="return false;"
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
<div class="draggable"></div>
.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.draggable input {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
if ($.browser.msie)
$('.draggable').find(':not(input)').attr('unselectable', 'on');
将此添加到您想要禁用文本选项的第一个 div 中:
onmousedown='return false;'
onselectstart='return false;'
这将是有用的,如果颜色选择也不需要:
::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }
...所有其他浏览器修复. 它将在 Internet Explorer 9 或更高版本中运行。
.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>
然而,这不是最好的方式。
对于 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 */
}
查看我的解决方案没有JavaScript:
吉普赛
首頁 〉外文書 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學
使用我的技术的Popup菜单: http://jsfiddle.net/y4Lac/2/
雖然這個假設元素在CSS Selectors Level 3的草案中,但在候選人推薦階段中被移除,因為它顯然他的行為被低估,特別是與<unk>化元素,並且互動性未達成。
它正在讨论在如何 :: 选择工作在无缝元素。
尽管它正在在浏览器中实施,但您可以通过使用相同的颜色和背景颜色来创建一个不被选择的文本的幻觉,与选项卡设计(在您的情况下)。
正常的CSS设计
p { color: white; background: black; }
关于选择
p::-moz-selection { color: white; background: black; }
p::selection { color: white; background: black; }
不允许用户选择文本会引发可用性问题。
这在某些浏览器中工作:
::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}
简单地将您所需的元素/ID 添加到由无空间的 commas 分开的选择器前面,如下:
h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}
其他答案是更好的;这可能应该被视为最后的避难所 / 冲突。
对于那些在 Android 浏览器中与触摸事件取得相同的困难的人,请使用:
html, body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
注意事项:
正确的答案是正确的,它阻止你能够选择文本,但是,它不会阻止你能够复制文本,因为我会显示下一对屏幕截图(如2014年11月7日)。
此分類上一篇
此分類上一篇
此分類上一篇
你可以看到,我们无法选择数字,但我们能够复制它们。
测试:Ubuntu,Google Chrome 38.0.2125.111。
要得到我需要的结果,我发现我不得不使用:选择和用户选择
input.no-select:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.no-select::selection {
background: transparent;
}
input.no-select::-moz-selection {
background: transparent;
}
在以前的答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为路由器仍在变化。
.noselect { cursor: 默认; -webkit-touch-callout: 无; -webkit-user-select: 无; -khtml-user-select: 无; -moz-user-select: 无; -ms-user-select: 无; user-select: 无; } <p> 可选文本. </p> <p class="noselect"> 不可选文本. </p>
这将使您的文本完全平坦,就像它在桌面应用程序中一样。
试着使用这个:
::selection {
background: transparent;
}
如果您想指定不在特定元素中选择,则只需在选择规则之前设置元素类或ID,例如:
.ClassNAME::selection {
background: transparent;
}
#IdNAME::selection {
background: transparent;
}
假设有两种类似的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-Tricks网站上学到了。
user-select: none;
这也是:
::selection {
background-color: transparent;
}
::moz-selection {
background-color: transparent;
}
::webkit-selection {
background-color: transparent;
}
这种突出效果是由于所谓的Hover(onMouseHover)的行动。
当你在任何选项卡上滑动时,它的颜色将被更改。
比如说,
HTML 代码
<div class="menu">
<ul class="effect">
<li>Questions</li>
<li>JOBS</li>
<li>Users</li>
</ul>
</div>
CSS 代码
.effect:hover {
color: none;
}
你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。
尝试将这些行插入CSS并在课堂属性中称为“disHighlight”:
.disHighlight {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
}
您可以使用 *- 用户选择的属性如下为此...
p {
-webkit-user-select: none; /* Chrome all and Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10 and later */
user-select: none; /* Likely future */
}
关于详细描述的链接
您可以通过 : 之前使用此解决方案:
天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天
JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/
您可以使用 CSS 或 JavaScript。
JavaScript 模式支持较旧的浏览器,如旧版本的 Internet Explorer 也,但如果不是你的情况,使用 CSS 模式,然后:
HTML 和 JavaScript:
<html onselectstart='return false;'> <body> <h1> 这是标题!</h1> <p> 我是文本,如果你选择我,我不会被选中。
HTML / CSS:
.not-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <body class="not-selectable"> <h1>This is the Heading!</h1> <p>And I'm the text, I won't be selected if you select me.</p> </body>
更好的是,您可以禁用文本选择。
如果你喜欢Sass(SCSS),而你不想使用Compass,你可以这样做:
风格.scss
@mixin user-select($select) {
-webkit-touch-callout:#{$select};
@each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
#{$pre + user-select}: #{$select};
}
#{user-select}: #{$select};
}
.no-select {
@include user-select(none);
}
我将各种浏览器 CSS 选择属性与 Internet Explorer < 9 所需的不可选择标签相结合。
<style>
[unselectable="on"] {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer 10+/Edge */
user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
快速黑客更新
如果您使用所有 CSS 用户选择的属性(包括浏览器预定),则仍然存在一个问题。
.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10+ */
user-select: none; /* Likely future */
}
正如CSS-Tricks所说,问题是:
WebKit 仍然允许文本复制,如果您选择周围的元素。
您也可以使用下面的一个,以确保一个完整的元素被选中,这意味着如果您点击一个元素,所有包含在该元素的文本将被选中。
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
如果您想使用 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 */
}
与CSS-
div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; "unselectable='on' onselectstart="return false;" onmousedown="return false; } <div> Blabla <br/> 更多 Blabla <br/> 更多 Blabla... </div>
::selection {background: transparent; color: transparent;}
::-moz-selection {background: transparent; color: transparent;}
它很容易用:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
替代:
假设你有一个 <h1 id="example">Hello, World!</h1>. 你将不得不删除内部HTML的 h1,在这种情况下Hello, World. 然后你将不得不去CSS并这样做:
#example::before // You can of course use **::after** as well.
{
content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.
display: block; // To make sure it works fine in every browser.
}
现在它只是认为它是一个区块元素,而不是文本。
你也可能想防止背景菜单出现,当触摸的元素,如按钮,他们的选择被阻止,这样做,添加这个代码到整个页面,或者只是这些按钮元素:
$("body").on("contextmenu",function(e){
return false;
});
使用SASS(SCSS合成)
你可以用混合物做到这一点:
// Disable selection
@mixin disable-selection {
-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 */
}
// No selectable element
.no-selectable {
@include disable-selection;
}
在HTML标签中:
<div class="no-selectable">TRY TO HIGHLIGHT. YOU CANNOT!</div>
在这个 CodePen 中尝试一下。
如果您正在使用 Autoprefixer,您可以删除其他预定。
浏览器兼容性在这里
这可能工作
::selection {
color: none;
background: none;
}
/* For Mozilla Firefox */
::-moz-selection {
color: none;
background: none;
}
将一个类添加到您的 CSS 定义你不能选择或突出一个元素。
<style>
.no_highlighting{
user-select: none;
}
.anchor_without_decoration:hover{
text-decoration-style: none;
}
</style>
<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>
你尝试过吗?
.disableSelect{
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
pointer-events:none;
}
第一個方法:(完全無情):
.no-select::selection, .no-select *::selection {
background-color: Transparent;
}
.no-select { /* Sometimes I add this too. */
cursor: default;
}
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>
狙击:
.no-select::selection,.no-select *::selection {背景颜色:透明; }.no-select { /* 有时我也添加了这个。 */ cursor:默认; } <span>RixTheTyrunt是最好的!</span> <br> <span class="no-select">RixTheTyrunt是最好的!</span>
第二种方法(不含)
.no-select {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
狙击:
.no-select { 用户选择: 无; -moz-用户选择: 无; -webkit-用户选择: 无; } <span>RixTheTyrunt 是最好的!</span> <br> <span class="no-select">RixTheTyrunt 是最好的!</span>
首先,解决问题,然后写代码,约翰·约翰逊
