| 类名 | 样式 |
|---|---|
| .user-select-all | -webkit-user-select: all; user-select: all; |
| .user-select-auto | -webkit-user-select: auto; user-select: auto; |
| .user-select-text | -webkit-user-select: text; user-select: text; |
| .user-select-none | -webkit-user-select: none; user-select: none; |
概览
当用户使用 user-select 工具与内容互动时，更改内容的选择方式。
基本用法
当用户点击时，这段文字将被全部选中。
这一段具有默认的选择行为。
此段落只有在用户点击时才允许选择文本，即使 CSS user-select 属性被设置为其他值。
当用户点击时，这段文字将无法被选中。
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-text">This paragraph will only allow the text to be selected when clicked by the user, even if the CSS <code>user-select</code> property is set to something else.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>使用案例
.user-select-all- 对代码片段、ID 或其他用户可能想要完全复制的内容很有用.user-select-auto- 默认浏览器行为，允许正常文本选择.user-select-text- 强制文本保持可选择状态，有助于覆盖祖先设置的user-select: none.user-select-none- 禁止文本选择，对 UI 元素、按钮或装饰性文本很有用
可访问性提示：使用 user-select: none 时请小心，因为它可能干扰辅助技术和键盘导航。请确保重要内容通过其他方式仍然可访问。
CSS
Sass 工具 API
用户选择的工具在我们的工具 API 中的 scss/_utilities.scss 中声明。了解如何使用工具 API。
"user-select": (
property: user-select,
values: all auto text none
),