如何在css3中获得'user-select：text'的效果？

Posted 2023-03-06

【中文标题】如何在css3中获得\'user-select：text\'的效果？

【英文标题】：How to get the effect of 'user-select: text' in css3?如何在css3中获得'user-select：text'的效果？

【发布时间】：2011-11-13 10:21:11

【问题描述】：

http://jigsaw.w3.org/css-validator/ 的验证器说 'user-select' 的值 'text' 无效。对于其中包含此代码的 css 规则：

   user-select: text;

验证者说：

文本不是用户选择的值：文本文本

大概是因为这种行为，在（过时的）http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select：

此属性不会被继承，但它确实会影响 与 display: none 一样，它会限制它。那就是如果一个元素 是用户选择：无，用户选择的值是什么并不重要 它的孩子，元素的内容或它的孩子的内容 无法选择。

另外，我只看到 w3.org 的过期 css3 文档中指定的属性值“文本”：

http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

而不是最新的：http://www.w3.org/TR/css3-ui/

此外，搜索“whatwg.org”一无所获。

如果 'user-select: text' 是有效的 css3，任何想法，如果不是，应该使用什么来代替？

这将用于，例如，当覆盖应用于文本容器和祖先容器的“用户选择：无”规则时。

【参考方案1】：

你弄错了。 user-select:text 并不意味着它只会选择文本。这是user-select 属性的默认值。 W3C这样形容：

元素的内容遵循标准的文本内容选择模型。

还有MDN syas 一样的东西：

-moz-none 元素和子元素的文本不能被选中， 但是可以使用子元素启用选择 -moz-user-select:text.

所以我认为这不会阻止选择图像或框。 据我所知，当您的大部分或所有元素都有user-select:none 并且您有一个作为输出类型的文本框或文本区域并且您希望它可以选择用于复制和粘贴时，user-select:text 很有用。

如果您使用 -webkit- 前缀，它似乎对我有用。我确信它也适用于 -moz- 前缀。在浏览器中测试这个fiddle。我不知道为什么 user-select:text 无法在我的 Chrome 13 Mac 上运行？

【讨论】：

“我不知道为什么 user-select:text 无法在我的 Chrome 13 Mac 上运行？”因为还没有人支持“官方”方式？

是的，你很有逻辑。我记得边界半径是一样的

“如果你使用 -webkit- 前缀，它似乎可以工作......” - 已验证：jsfiddle.net/christopherbalz/3zXTC 该链接还验证，此时，普通的“用户选择”要么不起作用或同样工作。

css 验证器可能会抱怨，因为 'text' 是默认值，并且在我的问题中引用的规范中的措辞表明 'none' 不能被有意义地覆盖。但很明显，专有扩展可以覆盖“无”。换句话说，它不会像 'display: none' 那样影响孩子。