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

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

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


当前回答

我从CSS-Tricks网站上学到了。

user-select: none;

这也是:

::selection {
    background-color: transparent;
}

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

::webkit-selection {
    background-color: 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)中,虽然不可能在未选择的元素中启动选项,但仍然不可能阻止在未选择的元素之前和之后开始的选项,而不会使整个文档不可选择。

更好的是,您可以禁用文本选择。

如果你喜欢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);
}

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

浏览器兼容性在这里

假设有两种类似的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>

设置默认的路由器,以便它给用户一个不可选择的感觉。

预定必须用于支持它在所有浏览器. 没有预定,这可能不会在所有答案工作。

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

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