用户选择：无导致 Safari 上无法访问输入字段答案

【问题标题】：User select:none causes input field to be inaccessible on Safari用户选择：无导致 Safari 上无法访问输入字段
【发布时间】：2012-06-04 21:09:49
【问题描述】：

使用这些 css 样式，我可以防止在页面上选择突出显示的文本。但这会导致输入字段被 Safari 上的用户输入锁定。

* {
-webkit-touch-callout: none;
-webkit-user-select: none; // locks fields on Safari
-khtml-user-select: none; // locks fields on Safari
-moz-user-select: none;
-ms-user-select: none;
user-select: none;      
}

Safari 有没有办法在不干扰输入字段的情况下防止用户选择？

【问题讨论】：

标签： html css

【解决方案1】：

为什么不将样式应用于除输入之外的所有内容？

css3 方式： *:not(input){...}

【讨论】：

不要忘记文本区域：*:not(input textarea){...}
@tomaspolach 您的语法不正确。正确的语法是：*:not(input):not(textarea)

【解决方案2】：

没什么新鲜的:)

*:not(input, textarea){
    -webkit-touch-callout: none;
    -webkit-user-select: none; // locks fields on Safari
    -khtml-user-select: none; // locks fields on Safari
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

【讨论】：

【解决方案3】：

对于 css 中的每种情况：

*:not(input), *:focus: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;
  outline-style:none;/*IE*/
}

【讨论】：

【解决方案4】：

我需要一些更精确的东西。

input[type=text] 
{
  -webkit-user-select: text;
}

input[type=password]
{
  -webkit-user-select: all;
}

【讨论】：

在功能方面有什么区别？抱歉，我知道我可以试试，只是真的很忙……
这将只选择类型属性设置为文本或密码的特定输入元素。这是不支持not 的旧浏览器所必需的。但是，我会这样做：* { ... user-select: none; } input { ... user-select: text; }