Question

我的布局如下：

HTML

<div class="Non-Select">
  <div>Title</div>
  <div><input name="title" type="textbox" /></div>
</div>

CSS：

Non-Select {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

我希望能够覆盖非选择类，以便我可以在文本框中选择文本。

任何建议都将不胜感激。

Answer 1

要使文本无法选择，需要了解有两个方法。如果我们需要版本10之前的Opera和Internet Explorer（在大多数情况下是积极的））） - 我们需要使用值为unselectable的{{1}}属性。

重要的是要注意，如果我们将此属性设置为父包装 - 在这种情况下为on - 仍然可以选择子元素的文本 - open {{ 3}}在opera或IE中最多9个来检查。所以我们需要将此属性添加到不应该选择的每个元素（如果有许多（或未知数量）可能的子元素，可能通过javascript动态）。

要禁用其他浏览器的选择，我们可能会使用css3 this fiddle属性。添加此css的一种很酷的方式是通过.Non-Select，如下所示：

attribute selector

因此 - 在大多数流行的浏览器中都无法选择具有此属性的任何元素上的文本。

第二种方式更短。如果我们不需要IE或Opera - 您的代码必须经过一些小改动才能在Firefox，Chrome和IE10中运行。

[unselectable="on"]{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

注意我添加的非标准.Non-Select { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; } .Non-Select input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }值。如果我们仔细阅读user-select，我们会看到Mozilla引入了这个非标准版来启用子元素选择。第二种方法的实例可以在这里看到： - this property on MDN

修改：http://jsfiddle.net/jxnEb/5/。注意接受的答案，其中作者编写了一个函数，以递归方式将-moz-none属性添加到所有子元素。（在您的情况下 - 当然应该过滤unselectable。）

Answer 2

使用此CSS

.Non-Select input {
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}

Answer 3

您可以覆盖非选择中输入的默认行为。

.Non-Select{
  user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none;
}
.Non-Select input{
  user-select: text; 
  -khtml-user-select: text; 
  -moz-user-select: text;
}

Answer 4

只需像这样修改你的CSS：

.Non-Select {
   -webkit-user-select: none;
    -khtml-user-select: none; 
      -moz-user-select: none;
        -o-user-select: none;
           user-select: none; 
}

你在课名前忘记了一个点。

这足以达到预期的效果。

文本框的CSS文本选择覆盖

4 个答案: