Question

因此，以下内容适用于Chrome，但不适用于FireFox：

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

input {
    -webkit-touch-callout: auto;
    -webkit-user-select: auto;
    -khtml-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

有没有办法禁用容器元素的选择，但是允许选择表格输入这样的东西？

Answer 1

一些建议（试图发挥创意）

1.简单地写：

:not(input) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

此规则应该应用于除input之外的所有内容，这样就不需要另一条恢复输入行为的规则（也许它在某些FF版本上失败了？）

2.如果这不能解决，请尝试使用具有透明背景的-moz-selection/selection伪类作弊用户选择

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

input::-moz-selection { background: blue; color: #fff; }
input::selection      { background: blue; color: #fff; }

作为可用性的旁注避免了这种限制：它们通常很烦人，如果有人想真正选择并复制页面上的文本，他可以从源代码视图轻松地做到这一点

CSS：禁用容器上的select，启用子项（不在Firefox中工作）

1 个答案: