CSS - user-select 属性

CSS user-select 属性确定用户是否可以选择文本，对作为浏览器用户界面（chrome）一部分加载的内容（除了文本框以外）没有影响。

虽然 user-select 不是继承的，但其初始值“auto”通常使其表现得好像继承了一样。基于 WebKit/Chromium 的浏览器将该属性实现为继承的，这违反了规范，并且会导致问题。Chromium 已经解决这些问题以符合指定的行为。

可能的值

none − 元素及其子元素的文本不可选择，但这些元素可能存在于 Selection 对象中。
auto − auto 值的确定方式如下
- ::before 和 ::after 伪元素使用 none 值。
- 对于可编辑元素，使用的值是 contain。
- 如果此元素的父元素具有 user-select 值 all，则使用的值是 all。
- 如果此元素的父元素具有 user-select 值 none，则使用的值是 none。
- 使用的值是 text。
text − 用户可以选择文本。
contain − 允许在元素内开始选择，但将选择限制在该元素的边界内。
all − 元素的内容必须以原子方式选择：如果选择包含元素的一部分，则它也必须包含其所有后代。如果在子元素中发生双击或右键单击，则将选择具有此值的最高祖先。

应用于

所有元素。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

user-select: none | auto | text | contain | all;

CSS user-select - none 值

以下示例演示了 user-select: none 属性阻止用户选择文本 -

Open Compiler

<html>
<head>
<style> 
   .text-none {
      -webkit-user-select: none; 
      user-select: none;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
   <p class="text-none">This text cannot be selected.</p>
</body>
</html>

CSS user-select - auto 值

以下示例演示了用于选择文本的 user-select: auto 属性 -

Open Compiler

<html>
<head>
<style> 
   p {
      -webkit-user-select: auto; 
      user-select: auto;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
</body>
</html>

CSS user-select - text 值

以下示例演示了 user-select: text 属性允许用户选择文本 -

Open Compiler

<html>
<head>
<style> 
   p {
      -webkit-user-select: text; 
      user-select: text;
   }
</style>
</head>
<body>
   <p>This text should be selectable.</p>
</body>
</html>

CSS user-select - all 值

以下示例演示了 user-select: all 属性允许用户单击一次选择文本 -

Open Compiler

<html>
<head>
<style> 
   p {
      -webkit-user-select: all; 
      user-select: all;
   }
</style>
</head>
<body>
   <p>This text can be selected with a single click.</p>
</body>
</html>

CSS user-select - contain 值

以下示例演示了 user-select: contain 属性允许用户选择段落边界内的文本 -

Open Compiler

<html>
<head>
<style> 
   p {
      -webkit-user-select: contain; 
      user-select: contain;
   }
</style>
</head>
<body>
   <p>This text can be selected within the paragraph's boundaries.</p>
</body>
</html>

打印页面