如何禁用文本选择突出显示


5200

对于充当按钮的锚(例如,“堆栈溢出”页面顶部的“ 问题”,“ 标签”,“ 用户 ”等)或选项卡,是否存在CSS标准方法来禁用突出显示效果(如果用户不小心选择了文本)?

我意识到可以使用JavaScript来完成此操作,并且经过一番搜寻后得出了仅适用于Mozilla的-moz-user-select选项。

是否有使用CSS的符合标准的方法,如果没有,“最佳实践”方法是什么?


7
元素女巫中的元素是否可以禁用样式突出显示,或者在样式或类属性中的CSS中启用了突出显示?或换句话说,-webkit-user-select ect是否有其他值。除了没有?

7
相关信息:stackoverflow.com/questions/16600479/…=如何仅允许选择某些子元素
JK。

9
在某些浏览器中存在一个错误,即执行“全选”(CTRL + A和CMD + A)仍会选择内容。可以使用透明的选择颜色来进行战斗: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP 2014年

12
我可以说:请不要这样做。根据我的经验,我经常不希望选择一些也可以用作按钮的文本,然后将其复制粘贴到其他位置。无法做到这一点真是令人难以置信,因为某些Web开发人员会竭力为我禁用此功能,这真是令人难以置信。因此,除非您有非常充分的理由,否则请不要这样做。
kajacx

3
在2017年,它是更好的方式来使用postcssautoprefixer并设置浏览器版本,然后postcss让一切都很酷。
AmerllicA

Answers:


7320

2017年1月更新:

根据我可以使用user-select除Internet Explorer 9和更早版本外,所有浏览器当前都支持。(可惜的是,仍然需要供应商前缀)。


所有正确的CSS变体是:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


注意这user-select是在标准化过程中(当前在W3C工作草案中)。不能保证它在任何地方都能工作,并且浏览器的实现可能会有所不同,将来浏览器可能会放弃对此的支持。


可以在Mozilla开发人员网络文档中找到更多信息。


38
好的代码molokoloco:D,尽管我个人不会使用它,因为有时您可能需要针对不同浏览器使用不同的值,并且它依赖JavaScript。制作一个类并将其添加到您的元素中,或将CSS应用于样式表中的元素类型,这是相当不错的证明。
Blowsie 2011年

58
'用户选择'-值:无| 文字| 切换| 元素| 元素| 全部| 继承- w3.org/TR/2000/WD-css3-userint-20000216
Blowsie

34
实际上-o-user-select不是在Opera中实现的。它改为实现IE的unselectable属性。
蒂姆·唐

30
由于某种原因,仅此一项就无法在IE8中使用,然后我将其添加<div onselectstart="return false;">到了我的主div中。
robasta 2012年

306
这是荒唐的!有很多不同的方式来做同一件事。让我们为用户选择制定新的标准。我们称之为standard-user-select。那么我们就不会有这些问题。尽管为了向后兼容,我们也应包括其他版本。所以现在代码变成了-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;。嗯,好多了。
Claudiu 2012年

854

在大多数浏览器中,可以使用CSS user-select属性的专有变体来实现此目的,该属性最初是在CSS 3中提出,然后在CSS 3中弃用,而现在在CSS UI Level 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,您将需要使用unselectable希望不可选择的元素的属性。您可以使用HTML中的属性进行设置:

<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"));

2014年4月30日更新:每当向树中添加新元素时,都需要重新运行此树遍历,但是从@Han的评论看来,可以通过添加一个在mousedown事件unselectable的目标上设置的事件处理程序来避免这种情况事件。有关详细信息,请参见http://jsbin.com/yagekiji/1


这仍然不能涵盖所有可能性。尽管无法在不可选择的元素中启动选择,但是在某些浏览器(例如Internet Explorer和Firefox)中,仍然无法防止在不可选择的元素之前和之后开始的选择而不会使整个文档不可选择。


30
您应该从示例中删除*选择器,它的效率很低,在示例中真的不需要使用它吗?
Blowsie 2011年

66
@Blowsie:我不这么认为:CSS 2规范指出了*.foo并且.foo完全等效(在第二种情况下,*隐含了通用选择器()),因此除非浏览器存在古怪之处,否则我看不到包含*will的危害性能。包含*,这是我的一个长期习惯,我最初是为了提高可读性而这样做的:它一目了然地表明作者打算匹配所有元素。
蒂姆·唐

38
进一步阅读之后,看来*仅在将它用作键(最严格的选择器)时才无效,即.unselectable *。进一步的信息在这里code.google.com/speed/page-speed/docs/...
Blowsie

20
不用使用class =“ unselectable”,而只需使用属性选择器[unselectable =“ on”] {…}
Chris Calo

13
@ Francisc:否。正如我在评论中较早前对Blowsie所说的,这完全没有区别。
蒂姆·唐

196

Internet Explorer的JavaScript解决方案是:

onselectstart="return false;"

55
别忘了ondragstart
Mathias Bynens 2010年

9
这里还有一件事。如果将其添加到正文中,则将无法在textareas中选择文本或在IE中输入字段。我为IE修复它的方式。body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain

2
可以使用jQuery将其添加为属性-$(“ p”)。attr(“ onselectstart”,“ return false”)这是我在IE8中唯一可靠的方法
Matt

13
@Abudayah,因为它们在旧版本的Internet Explorer中无法使用?就是这个答案的重点。
Pekka

?? input即使使用,我仍然可以始终在元素中选择文本user-select: none。我需要知道如何防止这种情况
老男孩

191

在CSS 3的用户选择属性可用之前,基于Gecko的浏览器将支持-moz-user-select您已经找到的属性。基于WebKit和基于Blink的浏览器支持该-webkit-user-select属性。

当然,在不使用Gecko渲染引擎的浏览器中不支持此功能。

没有兼容“标准”的快捷方法。使用JavaScript是一种选择。

真正的问题是,为什么您希望用户无法突出显示并可能复制并粘贴某些元素?我没有一次不想让用户强调我网站的特定部分。我的几个朋友在花费大量时间阅读和编写代码之后,将使用突出显示功能来记住他们在页面上的位置,或者提供标记以使他们的眼睛知道接下来要去哪里。

我能看到的唯一有用的地方是,如果您有用于表单的按钮,并且用户复制并粘贴了网站,则该按钮不应被复制并粘贴。


20
按钮的事情正是我的动力。
09年

27
需要这样做的另一个原因是按住Shift键单击以选择表格或表格中的多行。您不想突出显示文本,而是希望它选择行。
Gordon Tucker 2010年

7
还有法律上的问题,即合法地重新发布他人的内容,但许可中的条款要求网络发布者防止轻易复制和粘贴文本。这就是促使我找到这个问题的原因。我不同意此要求,但与我签约的公司在法律上有义务以这种方式实施此要求。
Craig M

5
@CraigM css样式不会阻止一个人抓取HTML源并将其复制。如果您想保护自己的内容,则必须找到更好的方法。
敏捷绝地

27
高度互动的Web应用程序,带有大量的拖放操作...意外突出显示是一个很大的可用性问题。
马克·休斯

138

如果您要禁用除<p>元素以外的所有内容的文本选择,则可以在CSS中执行此操作(请注意-moz-none,这些元素允许在子元素中进行覆盖,而在其他浏览器中则允许使用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;
}

12
确保您还使输入字段可选: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange

11
请特别注意关闭除所有一项以外的所有代码上的浏览器UI期望值。例如,列表项<li />文本呢?
詹森·费瑟辛汉姆

根据MDN的说法,只是更新,因为Firefox 21 -moz-nonenone相同。
凯文·费根

2
为此,您可以分别添加cursor:default和cursor:text
:)

THE炸弹。也就是说。结束。 ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[选择无序列表中的所有内容,并使其变为不可选择状态,而不是破坏整个视图树。]感谢您的功课。我的按钮列表看起来不错,并且可以正确响应屏幕的轻按,而不是启动IME(Android剪贴板小部件)。
Hypersoft Systems

125

在先前答案中的解决方案中,选择已停止,但用户仍然认为您可以选择文本,因为光标仍在变化。要使其保持静态,您必须设置CSS光标:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

这将使您的文本完全平坦,就像在桌面应用程序中一样。


“扁平”相对于什么?
kojow7

@ kojow7与“分层”相反。而不是文本浮在其他元素之上。这类似于SVG和PNG图像之间的差异。
雪人

4
惊讶地发现Firefox在2019年仍然需要​​供应商前缀user-select: none;。让您想知道标准委员会上的人们仍在争论什么。“不,你们……我真的认为应该是user-select: cant;因为它更具描述性,您知道吗?” “我们已经解决了这个问题,迈克。我们必须省略撇号,这是不好的形式!” “足够了,每个人!我们将在下个月再次讨论这个问题。标准委员会会议休会!”
心理学家

109

您可以在Firefox和Safari(Chrome也可以吗?)中这样做

::selection { background: transparent; }
::-moz-selection { background: transparent; }

121
我不建议您这样做,因为它实际上并不能解决问题。禁用文本选择-它只是将其隐藏。这会导致不良的可用性,因为如果我在页面上拖动光标,则可能会选择任意文本而又不知道该文本。这会导致各种奇怪的可用性“错误”。
Keithamus 2011年

1
不适用于具有透明区域的PNG图像:始终会以浅蓝色选择...是否有任何解决方法?
AvL

80

WebKit的解决方法:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在CardFlip示例中找到了它。


1
使用transparent替代RGBA也适用在Chrome 42在Android上。
克林特·帕奇

77

我喜欢混合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,请将其添加到代码$(document).ready()块中:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

我认为您仍然希望任何输入元素都是可交互的,因此是:not()伪选择器。'*'如果您不在意,则可以改用它。

注意:Internet Explorer 9可能不需要这个额外的jQuery,因此您可能需要在其中添加版本检查。


5
使用-ms-user-select:无;(对于IE10)和您的jQuery“如果”应为:if((($ .browser.msie && $ .browser.version <10)|| $ .browser.opera)
mhenry1384 2013年

小心一点!要使其在Firefox中可选,您必须使用-moz-user-select: Normal;
Nicolas Thery

7
@ mhenry1384 jQuery.browser已从1.3版开始弃用,并已在1.9版中删除-api.jquery.com/jQuery.browser
WynandB 2013年

@Wynand好点。但是,存在哪种“功能检测”来确定要使用的CSS属性?
汤姆·奥格

@TomAuger您可以使用jQuery.support,它使您可以检查单个功能:链接
Aequanox 2013年

69

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

不过,这不是最好的方法。


3
您也可以将其title用作属性。
牙刷

6
这是一个非常有创意的解决方案。特别是如果它使用title属性,因为它可能对屏幕阅读器更好。
pseudosavant

4
我尝试了(JSBin),它在IE中不起作用。不幸的是,较旧的IE是唯一user-select无法使用的IE 。
pseudosavant

1
这是一个很棒的非JS替代品,可在Chrome浏览器中使用!太棒了!
saricden

华丽!……
寂寞

69

您可以为此使用CSSJavaScript

JavaScript的方式在支持旧的浏览器,如版本的Internet Explorer的为好,但如果它不是你的情况下,使用CSS的方式,则:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

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>


59

此外,对于Internet Explorer,您需要添加伪类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  */
}

3
只要在className类的元素上开始选择,这在IE中就可以正常工作。看到这个JSBin
pseudosavant

57

尝试将这些行插入CSS并在class属性中调用“ 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;
}

51

快速黑客更新

如果将值none用于所有CSS user-select属性(包括它的浏览器前缀),则可能会出现此问题。

.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仍然允许复制文本。

您还可以使用下面的一个来enforce选择整个元素,这意味着如果单击某个元素,则包装在该元素中的所有文本都将被选择。为此,您要做的就是将值更改noneall

.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  */
}

48

对于那些在触摸事件中无法在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;
}


46
-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');

46

工作中

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

这应该可以,但是不适用于旧的浏览器。存在浏览器兼容性问题。


未加前缀的CSS属性必须严格位于该属性的前缀版本列表的末尾。好的做法是正确的做法,其他的做法则是不好的做法,那就是从Chrome / Webkit创建“新IE”并导致很多丑陋的事情,例如在非Webkit浏览器中引入-webkit前缀支持。看,这已经是2012年了:dev.opera.com/articles/…–
FlameStorm

我引用:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm

42

使用SASS(SCSS语法)

您可以使用mixin做到这一点:

// 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</div>

在此CodePen中尝试

如果使用自动前缀,则可以删除其他前缀。

浏览器兼容性在这里


36

除了仅Mozilla的属性外,没有,没有办法仅使用标准CSS禁用文本选择(到目前为止)。

如果您注意到了,Stack Overflow不会禁用其导航按钮的文本选择,并且我建议大多数情况下不要这样做,因为它会修改正常的选择行为并使其与用户的期望相抵触。


虽然我同意它会改变用户期望的行为,但对于位于该表单字段旁边的“添加评论”按钮之类的东西来说,这是有意义的……
X-Istence,2009年

但这是否暴露了不必要的实现细节?无法选择输入或按钮的文本。

@anon:大多数用户可能不会尝试选择按钮的文本,因此在实践中,它并不重要。此外,为了这样做,他们将必须开始在按钮外部进行选择-如果他们在按钮本身内部单击,则将激活oncl​​ick处理程序。另外,某些浏览器(例如Safari)实际上允许您选择常规按钮的文本…
hbw

6
如果您从聊天线程中选择一组评论,并且每个评论旁边都有一个upvote / downvote按钮,那么最好选择没有其他内容的文本。这就是用户期望或想要的。他不想复制/粘贴每个评论的按钮标签。
Mnebuerquo 2013年

2
又例如,如果您双击一个按钮而不是将您重定向到另一个页面会打开一个div,该怎么办?那么由于双击,将选择按钮的文本!
Gigala 2014年

34

某些浏览器中可以使用:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

只需在选择器的前面添加所需的元素/ id,并用逗号将它们隔开,就不能使用空格,如下所示:

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;}

其他答案更好。这可能应该被视为不得已而为之。


3
几乎没有什么可以肯定知道的,但是此解决方案绝对不能在所有浏览器中起作用。
Volker E.

33

假设有两个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">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

将光标设置为默认,以便给用户带来无法选择的感觉。

在所有浏览器中都需要使用前缀来支持它。没有前缀,可能无法在所有答案中使用。



29

将此添加到要禁用文本选择的第一个div中:

onmousedown='return false;' 
onselectstart='return false;'

28

注意:

正确答案是正确的,因为它使您无法选择文本。但是,它不会阻止您复制文本,正如我将在接下来的几张屏幕截图(截至2014年11月7日)中所示。

在我们选择任何东西之前

选择之后

号码已被复制

如您所见,我们无法选择数字,但是我们能够复制它们。

测试于:UbuntuGoogle Chrome 38.0.2125.111。


1
我遇到了同样的问题。在Mac Chrome 48.0.2564.116和Mac Safari 9.0.3上。值得注意的是,Mac Firefox 43.0不会复制字符,但会在字符之间添加多余的结尾。对此应该怎么做?
NHDaly

26

为了获得所需的结果,我发现必须同时使用::selectionuser-select

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;
}

finalyyyyyyy问题的解答
oldboy

23

这很容易做到:

-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>。您将必须删除其中的innerHTML 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.
}

现在,它只是认为这是一个块元素,而不是文本。



21

检查没有JavaScript的解决方案:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

应用了我的技术的弹出菜单:http : //jsfiddle.net/y4Lac/2/


21

尽管此伪元素在CSS Selectors Level 3的草稿中,但在“候选推荐书”阶段已被删除,因为它的行为似乎没有得到充分说明,尤其是使用嵌套元素时,并且无法实现互操作性。

:: selection如何在嵌套元素上进行讨论。

尽管已在浏览器中实现了该功能,但您可以通过使用与选项卡设计相同的颜色和背景色(针对您的情况),使未选择的文本产生错觉。

普通CSS设计

p { color: white;  background: black; }

选择时

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

禁止用户选择文本会引起可用性问题。


这一定是为什么Netbeans自动完成不知道我在说什么的原因!
Halfer 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.