CSS - user-select 属性

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

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

可能的值

none − 元素和子元素的文本不可选择，但这些元素可能存在于 Selection 对象中。

auto − auto 值的确定方式如下：

用于 ::before 和 ::after 伪元素的值为 none。
对于可编辑元素，使用的值为 contain。
如果此元素的父元素具有用户选择值 all，则使用的值为 all。
如果此元素的父元素具有用户选择值 none，则使用的值为 none。
使用的值是文本。

text - 用户可以选择文本。

contain − 允许在元素内开始选择，但包含到该元素边界的选择。

all − 必须以原子方式选择元素的内容：如果选择包含元素的一部分，则它还必须包含其所有后代。如果在子元素中发生双击或上下文单击，则将选择具有此值的最高祖先。

适用于

所有元素。

语法


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

CSS user-select - 无值

以下示例演示了 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 - 自动值

以下示例演示了用于选择文本的 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 - 文本值

以下示例演示了 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 - 所有值

以下示例演示了 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 - 包含值

以下示例演示了 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>

打印本页