Css 简明教程

CSS - user-select Property

CSS user-select 属性确定是否允许用户选择文本，不会影响加载的浏览器用户界面（画面）中内容（除了文本框），也不影响文本。

Possible Values

  1. none − 元素及其子元素的文本不可选择，但这些元素可能存在于“选择”对象中。

  2. auto − 自动值按如下方式确定： ::before 和 ::after 伪元素使用的值是 none 。对于可编辑元素，使用的值是 contain 。如果该元素的父元素的 user-select 值是 all ，则使用的值是 all 。如果该元素的父元素的 user-select 值是 none ，则使用的值是 none 。使用的值是文本。

  3. text − 用户可以选择文本。

  4. contain − 允许在元素内开始选择，但将选择范围限定在该元素的边界内。

  5. all − 元素的内容必须以原子方式选择：如果选择包含一个元素的一部分，则它还必须包含该元素的所有后代。如果在子元素中发生 double-click 或 context-click ，则具有此值的最深层祖先将被选择。

Applies To

所有元素。

Syntax

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

CSS user-select - none Value

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

<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 Value

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

<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 Value

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

<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 Value

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

<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 Value

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

<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>