对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?

我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。

有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?


当前回答

与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>

其他回答

第一個方法:(完全無情):

.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>

首先,解决问题,然后写代码,约翰·约翰逊

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

我将各种浏览器 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 或 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>

这种突出效果是由于所谓的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;
}

你可以使用任何颜色,如果你想得到它突出,否则你不能使用任何颜色。