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

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

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


当前回答

如果您正在使用 Less 和 Bootstrap 您可以写下:

.user-select(none);

其他回答

您可以使用 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>

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

使用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,您可以删除其他预定。

浏览器兼容性在这里

.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>

然而,这不是最好的方式。

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