---
title: user-select
slug: Web/CSS/user-select
tags:
  - CSS
  - CSS Property
  - Reference
translation_of: Web/CSS/user-select
---
<div>{{CSSRef}}</div>

<p><a href="/zh-CN/docs/Web/CSS">CSS</a> 属性 <code><strong>user-select</strong></code><strong> </strong>控制用户能否选中文本。除了文本框内，它对被载入为 {{Glossary("Chrome", "chrome")}} 的内容没有影响。</p>

<pre class="brush:css">/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/* Global values */
user-select: inherit;
user-select: initial;
user-select: unset;

/* Mozilla-specific values */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

/* WebKit-specific values */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* Doesn't work in Safari; use only
                             "none" or "text", or else it will
                             allow typing in the &lt;html&gt; container */

/* Microsoft-specific values */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>

<p>{{cssinfo}}</p>

<div class="blockIndicator note">
<p><strong>注意：</strong><code>user-select</code> 不是继承属性，即使默认的属性值 <code>auto</code> 的表现基本上以继承为主，似乎是继承属性。甚至，WebKit/基于 Chromium 的浏览器在实现此属性时<em>将其作为继承属性</em>，但这和有关规范是相悖的，且会带来一些问题。目前，Chromium 暂时选择<a href="https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de">修复将其作为继承属性所带来的问题</a>，使最终表现符合规范。</p>
</div>

<h2 id="语法">语法</h2>

<dl>
 <dt><code>none</code></dt>
 <dd>元素及其子元素的文本不可选中。 请注意这个{{domxref("Selection")}} 对象可以包含这些元素。 从Firefox 21开始， <code>none</code> 表现的像 <code>-moz-none</code>，因此可以使用 <code>-moz-user-select: text</code> 在子元素上重新启用选择。</dd>
 <dt><code>auto</code></dt>
 <dd>
 <p><code>auto</code> 的具体取值取决于一系列条件，具体如下：</p>

 <ul>
  <li>在 <code>::before</code> 和 <code>::after</code> 伪元素上，采用的属性值是 <code>none</code></li>
  <li>如果元素是可编辑元素，则采用的属性值是 <code>contain</code></li>
  <li>否则，如果此元素的父元素的 <code>user-select</code> 采用的属性值为 <code>all</code>，则该元素采用的属性值也为 <code>all</code></li>
  <li>否则，如果此元素的父元素的 <code>user-select</code> 采用的属性值为 <code>none</code>，则该元素采用的属性值也为 <code>none</code></li>
  <li>否则，采用的属性值为 <code>text</code></li>
 </ul>
 </dd>
 <dt><code>text</code></dt>
 <dd>用户可以选择文本。</dd>
 <dt><code>all</code></dt>
 <dd>在一个HTML编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中。</dd>
 <dt><code>contain</code></dt>
 <dd>允许在元素内选择；但是，选区将被限制在该元素的边界之内。</dd>
 <dt><code>element</code>{{non-standard_inline}}（IE 专有别名）</dt>
 <dd>与 <code>contain</code> 相同，但仅在 Internet Explorer 中受支持。</dd>
</dl>

<div class="note">
<p><strong>注意：</strong> CSS UI 4 已<a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">将 <code>user-select</code> 的 <code>element</code> 属性值重命名为 <code>contain</code></a>。</p>
</div>

<h3 id="形式化语法">形式化语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;你应该可以选中这段文本。&lt;/p&gt;
&lt;p class="unselectable"&gt;嘿嘿，你不能选中这段文本！&lt;/p&gt;
&lt;p class="all"&gt;点击一次就会选中这段文本。&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
   <td>{{Spec2('CSS4 UI')}}</td>
   <td>初始值。也定义了 <code>-webkit-user-select</code> 作为一个不推荐使用的别名 <code>user-select</code>.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">此页面上的兼容性表由结构化数据生成。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送a pull request。</div>

<p>{{Compat("css.properties.user-select")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{Cssxref("::selection")}}</li>
 <li>JavaScript 的 {{domxref("Selection")}} 对象。</li>
 <li><a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a> 中的 <a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> 章节。</li>
</ul>