当 parent 具有 user-select 时，输入的 select() 行为不一致：none（chromium-based 浏览器）

Question

在 gif 上，您可以看到具有一致 select() 行为的输入（每次点击都会 select 编辑内容）和第二个输入，其中每次第二次点击都无法 select 任何内容

我有历史上添加到项目的全局样式

* {
  user-select: none;
}

input {
  user-select: text;
}

我发现 - 在 parent 上设置的 user-select: none 正在破坏其 children 输入的 select() 方法。

[MDN] user-select: none: The text of the element and its sub-elements is not selectable.

我不能删除旧样式，因为它可能会影响太多东西（我们计划重新审视这个，但不是现在），所以我试图覆盖 user-select 行为，但是当我设置时没有成功.parent {user-select: auto;} .parent .input {user-select: text;}

作为 JS 解决方法，我在 select() 之前将超时设置为 200 毫秒，但会出现难看的闪烁。

如何正确覆盖那些 CSS 道具？（对于这个例子，我将损坏的输入包装到 .buggy 中，这样另一个可以保持正常。但这并不代表项目结构，因为它在输入上方有几十个包装器，每个包装器都有 user-select: none）

刚刚发现这可以在 chromium-based 浏览器中重现 - chrome / edge / opera

.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}

<input type='text' value='normal input' onclick='this.select()'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input' onclick='this.select()'/>
  </div>
</div>

Answer 1

这是一个奇怪的错误，我还没有调查它的来源。
它可能需要一个错误报告，但请注意我可以从 M50 重现，这意味着它可能不会被视为高优先级。

目前，您可以通过在调用 select 方法之前清除 document's Selection 来解决此问题：

document.querySelectorAll('input').forEach( elem => {
  elem.onclick = (evt) => {
    getSelection().removeAllRanges(); // clear all selection
    elem.select();
  };
});

.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}

<input type='text' value='normal input'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input'/>
  </div>
</div>

当 parent 具有 user-select 时，输入的 select() 行为不一致：none（chromium-based 浏览器）

Inconsistent select() bahavior for input when parent has user-select: none (chromium-based browsers)

javascript

css

google-chrome

chromium

blink