如何禁用文本输入框的user-select？常规CSS代码无效求助

我碰到过好多次这个情况——表单元素（比如<input>、<textarea>）对user-select: none的支持和普通元素不一样，哪怕浏览器的开发者工具显示这个属性处于激活状态，它也可能不生效，大概率不是你的CSS被其他规则覆盖了。

为什么常规CSS无效？ #

浏览器对于可编辑的表单控件有原生的行为优先级，默认会强制允许用户选中文本，这是为了保证用户能复制、修改输入内容的基础体验。所以哪怕你显式设置了user-select: none，浏览器也可能忽略这个规则，尤其是在Chrome、Edge这类基于Chromium的浏览器里。

怎么确认是不是CSS被覆盖？ #

打开浏览器开发者工具的「计算样式（Computed）」面板，找到user-select属性：

• 如果这里显示的不是none，那说明确实有其他CSS规则覆盖了你的设置，你可以在「样式（Styles）」面板里找被划掉的user-select规则，提升你的选择器优先级（比如加上父元素类名、使用!important，不过尽量避免!important）。
• 如果计算样式里已经是none但还是能选中文本，那就是浏览器的原生限制，得换方法解决。

真正有效的解决办法 #

方法1：用JavaScript阻止选择事件

这是最可靠的方式，直接拦截浏览器的选中文本行为：

const targetInput = document.querySelector('input[type="text"]');
targetInput.addEventListener('selectstart', function(e) {
  e.preventDefault();
});

这个事件会在用户开始选中文本时触发，阻止默认行为就能直接禁用选择功能，同时不影响输入框的正常编辑。如果要兼容移动端的触摸选择，可以额外监听touchstart事件（不过大部分场景下selectstart已经足够）。

方法2：视觉层面隐藏选中效果（伪解决）

如果只是不想让用户看到选中文本的高亮样式，而不是完全禁止选择，可以用::selection伪元素：

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

这个方法只是让选中的文本看起来和没选中一样，但用户实际上还是能选中、复制内容，适合对功能限制要求不高的场景。

内容的提问来源于stack exchange，提问作者James Morrison