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

css cross-browser highlight textselection

对于充当按钮(例如位于 Stack Overflow 页面顶部的问题、标签、用户等)或选项卡的锚点,如果用户不小心选择了文本,是否有 CSS 标准方法来禁用突出显示效果?

我意识到这可以通过 JavaScript 完成,并且通过谷歌搜索产生了仅 Mozilla 的 -moz-user-select 选项。

是否有一种符合标准的方式来使用 CSS 实现这一点,如果没有,“最佳实践”方法是什么?

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

相关:stackoverflow.com/questions/16600479/… = 如何只允许选择部分子元素

在某些浏览器中存在一个错误,其中执行“全选”(CTRL+A 和 CMD+A)仍然会选择内容。这可以用透明的选择颜色来解决:::selection { background: transparent; } ::-moz-selection { background: transparent; }

在 2017 年,最好使用 postcssautoprefixer 并设置浏览器版本,然后 postcss 让一切变得凉爽。

用户界面发生了变化。在 2019 年,所有提到的三个项目现在都在左上角的汉堡菜单中。 “标签”和“用户”在那里,“问题”现在称为“堆栈溢出”(前面有一个图标)。

3
38 revs, 23 users 20%

2017 年 1 月更新:

根据 Can I use,目前所有浏览器都支持 user-select,除了 Internet Explorer 9 及其早期版本(但遗憾的是仍然需要供应商前缀)。

这些是所有可用的正确 CSS 变体:

.noselect { -webkit-touch-callout:无; /* 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 */ 用户选择:无; /* 无前缀版本,目前支持 Chrome、Edge、Opera 和 Firefox */ }

可选文本。

不可选择的文本。

请注意,user-select 处于标准化过程中(当前处于 W3C working draft 中)。它不能保证在任何地方都可以工作,并且浏览器之间的实现可能存在差异。此外,浏览器将来可能会放弃对它的支持。

更多信息可在 Mozilla Developer Network documentation 中找到。

此属性的值为 nonetexttoggleelementelementsallinherit

不错的代码 molokoloco :D ,虽然我个人会远离使用它,因为有时您可能需要不同浏览器的不同值,并且它依赖于 JavaScript。创建一个类并将其添加到您的元素或将 css 应用于样式表中您的元素类型是非常安全的。

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

这是荒唐的!这么多不同的方法来做同样的事情。让我们为用户选择制定一个新标准。我们称之为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;。啊,好多了。

根据 caniuse 的说法,它似乎不再需要这些前缀了。

@aderchox 在这种情况下, caniuse.com 是错误的。我仍然需要在 iOS 15.1 上使用 Safari 的 -webkit-user-select: none; 行。

P
Peter Mortensen

在大多数浏览器中,这可以使用 CSS user-select 属性 originally proposed and then abandoned in 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 的评论看来,可以通过添加 {2 } 在事件目标上设置 unselectable 的事件处理程序。有关详细信息,请参阅 http://jsbin.com/yagekiji/1

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

你应该从你的例子中删除 * 选择器,它真的效率低下,真的没有必要在你的例子中使用它吗?

@Blowsie:我不这么认为:CSS 2 规范指出 *.foo.foo 是完全等价的(在第二种情况下,通用选择器 (*) 是隐含的),所以除非浏览器怪癖,我看不出包含 * 会损害性能。包含 * 是我的一个长期习惯,我最初是为了可读性而开始这样做的:它一目了然地明确指出作者打算匹配所有元素。

哦,经过进一步阅读,似乎 * 仅在将其用作键(最右边的选择器)时才无效,即 .unselectable * 。更多信息在这里code.google.com/speed/page-speed/docs/…

而不是使用 class="unselectable",只需使用属性选择器 [unselectable="on"] { ... }

P
Peter Mortensen

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

这在不使用 Gecko 渲染引擎的浏览器中当然是不支持的。

没有符合“标准”的快速简便的方法来做到这一点;使用 JavaScript 是一种选择。

真正的问题是,为什么您希望用户不能突出显示并可能复制和粘贴某些元素?我从来没有遇到过我不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花了很多时间阅读和编写代码之后,会使用高亮功能来记住他们在页面上的位置,或者提供一个标记,以便他们的眼睛知道下一步该往哪里看。

我认为这很有用的唯一地方是,如果用户复制和粘贴网站时,如果您有不应该复制和粘贴的表单按钮。

这对于嵌入式设备可能是必需的。即使用浏览器呈现 UI 的设备。

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

具有大量拖放功能的高度交互的网络应用程序......意外突出显示是一个很大的可用性问题。

P
Peter Mortensen

Internet Explorer 的 JavaScript 解决方案是:

onselectstart="return false;"

不要忘记ondragstart

J
James Donnelly

如果您想禁用除 <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;
}

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

关闭浏览器 UI 对除一项之外的所有代码的期望时要非常小心。例如,列表项

  • 文本呢?

    只是一个更新...根据 MDN,因为 Firefox 21 -moz-nonenone 是相同的。

    为此,您可以分别添加 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 剪贴板小部件)。

  • P
    Peter Mortensen

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

    .noselect { 光标:默认; -webkit-touch-callout:无; -webkit 用户选择:无; -khtml-用户选择:无; -moz 用户选择:无; -ms 用户选择:无;用户选择:无; }

    可选择的文本。

    不可选择的文本。

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

    “扁平化”与什么相对?

    @kojow7 与“分层”相反。而不是漂浮在其他元素之上的文本。它类似于 SVG 和 PNG 图像之间的区别。

    惊讶地发现 Firefox 在 2019 年仍然需要供应商前缀。我无视地只使用了 user-select: none;,以为该标准现在会被采用,但遗憾的是它没有。让你想知道标准委员会的人还在争论什么。 “不,你们……我真的认为应该是 user-select: cant;,因为它更像是描述性的,你知道吗?” “我们已经解决了这个问题,迈克。我们将不得不省略撇号,这是一种糟糕的形式!” “够了,大家!这件事我们下个月再商议。标准委员会会议休会!”

    @Tim Downs 答案的不错补充。

    J
    James Donnelly

    您可以在 Firefox 和 Safari(Chrome 也可以?)

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

    我不建议这样做,因为它实际上并不能解决问题;禁用文本选择 - 它只是隐藏它。这可能会导致可用性不佳,因为如果我在页面上拖动光标,我可能会在不知情的情况下选择任意文本。这可能会导致各种奇怪的可用性“错误”。

    不适用于具有透明区域的 PNG 图像:总是以浅蓝色选择...有什么解决方法吗?

    P
    Peter Mortensen

    WebKit 的解决方法:

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

    我在 CardFlip 示例中找到了它。

    使用 transparent 代替 rgba 也适用于 Android 上的 Chrome 42。

    j
    johannchopin

    我喜欢混合 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 片段,因此您可能需要在其中添加版本检查。

    使用 -ms-user-select: none; (对于 IE10)和你的 jQuery “if”应该是这样的: if (($.browser.msie && $.browser.version < 10) || $.browser.opera)

    小心男人!!!要使其在 Firefox 中可选,您必须使用 -moz-user-select: Normal;

    @mhenry1384 jQuery.browser 自 1.3 版起已弃用,并已在 1.9 版中删除 - api.jquery.com/jQuery.browser

    @Wynand 好点。但是存在什么样的“特征检测”来确定使用哪个 CSS 属性?

    @TomAuger 您可以使用 jQuery.support,它允许您检查单个功能:Link

    F
    Fred Gandt

    .hidden:after { 内容:attr(data-txt); }

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

    您也可以使用 title 作为属性。

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

    我试过了(JSBin),它在 IE 中不起作用。不幸的是,旧 IE 是唯一不适合 user-select 的。

    这是一个很棒的非 JS 替代品,适用于 Chrome!惊人的!

    这是我需要阻止实际选择而不仅仅是阻止显示选择。

    P
    Peter Mortensen

    您可以为此使用 CSS 或 JavaScript。

    旧版浏览器也支持 JavaScript 方式,例如旧版本的 Internet Explorer,但如果不是您的情况,请使用 CSS 方式:

    HTML/JavaScript:

    这是标题!

    而且我是文字,如果你选择我,我不会被选中。

    HTML/CSS:

    .not-selectable { -webkit-touch-callout: none; -webkit 用户选择:无; -khtml-用户选择:无; -moz 用户选择:无; -ms 用户选择:无;用户选择:无; }

    这是标题!

    而我是文字,你选择我就不会被选中。

    身体>

    P
    Peter Mortensen

    另外对于 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  */
    }
    

    只要选择从具有 className 类的元素开始,这在 IE 中确实有效。请参阅此JSBin

    P
    Peter Mortensen

    尝试将这些行插入 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
    Peter Mortensen

    快速破解更新

    如果您对所有 CSS user-select 属性(包括它的浏览器前缀)使用值 none,则仍然会出现问题。

    .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 来选择整个元素,这意味着如果您单击一个元素,则包含在该元素中的所有文本都将被选中。为此,您只需将值 none 更改为 all

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

    使用 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. YOU CANNOT!</div>
    

    在这个CodePen试试

    如果您使用的是 autoprefixer,则可以删除其他前缀。

    浏览器兼容性 here

    P
    Peter Mortensen

    对于那些在 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;
    }
    
    P
    Peter Mortensen

    如果您使用 LessBootstrap,您可以编写:

    .user-select(none);
    
    P
    Peter Mortensen
    -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');
    
    h
    hbw

    除了 Mozilla-only 属性,不,没有办法仅使用标准 CSS 禁用文本选择(截至目前)。

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

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

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

    @anon:大多数用户可能不会尝试选择按钮的文本,所以在实践中,它应该不是很重要。此外,为了这样做,他们必须开始在按钮外部进行选择——如果他们在按钮本身内部单击,onclick 处理程序将改为激活。另外,某些浏览器(例如 Safari)实际上允许您选择普通按钮的文本……

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

    例如,如果您双击一个按钮而不是将您重定向到另一个页面会打开一个 div 怎么办?然后由于双击,按钮的文本将被选中!

    P
    Peter Mortensen

    这适用于某些浏览器:

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

    其他答案更好;这可能应该被视为最后的手段/总括。

    可以肯定知道的事情很少,但这个解决方案肯定不适用于所有浏览器。

    P
    Peter Mortensen

    假设有两个这样的 div

    .second { 光标:默认;用户选择:无; -webkit 用户选择:无; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ -webkit-touch-callout: none; /* iOS Safari */ }

    这是我的第一个 div
    这是我的第二个 div

    将光标设置为默认值,这样它会给用户一种无法选择的感觉。

    需要使用前缀在所有浏览器中支持它。如果没有前缀,这可能不适用于所有答案。

    P
    Peter Mortensen

    如果也不需要颜色选择,这将很有用:

    ::-moz-selection { background:none; color:none; }
    ::selection { background:none; color:none; }
    

    ...所有其他浏览器修复。它将在 Internet Explorer 9 或更高版本中工作。

    使color: inherit;也许。

    是的,我喜欢它。根据 Mozilla docs,它是 css 选择器级别 3

    P
    Peter Mortensen

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

    onmousedown='return false;' 
    onselectstart='return false;'
    
    P
    Peter Mortensen

    笔记:

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

    https://i.stack.imgur.com/gcKTY.png

    https://i.stack.imgur.com/xwPld.png

    https://i.stack.imgur.com/Ex6UH.png

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

    测试于:UbuntuGoogle Chrome 38.0.2125.111。

    我有同样的问题。在 Mac Chrome 48.0.2564.116 和 Mac Safari 9.0.3 上。值得注意的是,Mac Firefox 43.0 不会复制字符,而是在它们之间添加额外的结束线。对此应该怎么做?

    P
    Peter Mortensen

    它很容易通过以下方式完成:

    -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>。您必须删除该 h1 的 innerHTML,在本例中为 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.
    }
    

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

    P
    Peter Mortensen

    为了得到我需要的结果,我发现我必须同时使用 ::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;
    }
    
    A
    Automatico

    这不是 CSS,但值得一提:

    jQuery UI Disable Selection

    $("your.selector").disableSelection();
    
    P
    Peter Mortensen

    在没有 JavaScript 的情况下检查我的解决方案:

    jsFiddle

    li:hover { 背景颜色:银色; } #id1:before { 内容:“文件”; } #id2:before { 内容:“编辑”; } #id3:before { 内容:“查看”; }

    • a>

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

    P
    Peter Mortensen

    虽然这个伪元素出现在 CSS 选择器 Level 3 的草案中,但在候选推荐阶段被删除了,因为它的行为似乎没有明确说明,尤其是嵌套元素,并且没有实现互操作性。

    How ::selection works on nested elements 中正在讨论它。

    尽管它正在浏览器中实现,但您可以通过在选择时使用与选项卡设计相同的颜色和背景颜色(在您的情况下)来制造未选择文本的错觉。

    普通 CSS 设计

    p { color: white;  background: black; }
    

    选择时

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

    不允许用户选择文本会引发可用性问题。

    这一定是 Netbeans 自动完成不知道我在说什么的原因!

    P
    Peter Mortensen

    我从 CSS-Tricks 网站了解到。

    user-select: none;
    

    这也是:

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

    只会让它看不见