1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: user-select
slug: Web/CSS/user-select
translation_of: Web/CSS/user-select
---
<div>{{CSSRef}}</div>
<p>La propiedad <a href="/en-US/docs/Web/CSS">CSS </a><code><strong>user-select</strong></code> controla si el usuario puede seleccionar el texto. Esto no tiene ningún efecto en el contenido cargado bajo {{Glossary("Chrome", "chrome")}}, excepto en cuadros de texto.</p>
<pre class="brush:css">/* Valores de palabras clave */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Varoles globales */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Valores Mozilla-specific */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Valores WebKit-specific */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* No funciona el Safari; solo usa
"none" or "text", o si no hará
permitir escribir en el contenedor <html> */
/* Valores Microsoft-specific */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntaxis">Syntaxis</h2>
<dl>
<dt><code>none</code></dt>
<dd>El texto y sus sub elementos no son seleccionables. Tenga en cuenta que el objeto {{domxref("Selection")}} puede contener estos elementos.</dd>
<dt><code>auto</code></dt>
<dd>El valor calculado auto se determina de la siguiente manera: En los pseudo elementos <code>::before</code> y <code>::after</code>, el valor calculado es <code>none</code>
<ul>
<li>Si el elemento es un elemento editable, el valor calculado es <code>contain</code></li>
<li>De lo contrario, si el valor calculador de <code>user-select</code> en la matriz de este elemento es <code>all</code>, el valor calculado es <code>all</code></li>
<li>De lo contrario, si el valor calulado de <code>user-select</code> en la matriz de este elemento es <code>none</code>, el valor calculado es <code>none</code></li>
<li>De lo contrario, el valor calculado es <code>text</code></li>
</ul>
</dd>
<dt><code>text</code></dt>
<dd>El texto puede ser seleccionado por el usuario.</dd>
<dt><code>all</code></dt>
<dd>En el editor HTML, si se realiza doble-click o click-contextual en el subelemento, se seleccionará el antecesor más alto de el valor.</dd>
<dt><code>contain</code></dt>
<dd>Permite que la selección comience dentro del elemento; sin embargo, la selección estará contenida por los límites de ese elemento.</dd>
<dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt>
<dd>Igual que <code>contain</code>. Solo lo soportado en Internet Explorer.</dd>
</dl>
<div class="note">
<p id="Formal_syntax"><strong>Nota:</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">renombra user-select: a contain</a>.</p>
</div>
<h3 id="Formal_syntax_2">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Debería poder seleccionar este texto.</p>
<p class="unselectable">No puedes seleccionar este texto</p>
<p class="all">Al hacer clic una vez se seleccionará todo este texto.</p>
</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="Resultado">Resultado</h3>
<p>{{EmbedLiveSample("Examples")}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
<td>{{Spec2('CSS4 UI')}}</td>
<td>Initial definition. Also defines <code>-webkit-user-select</code> as a deprecated alias of <code>user-select</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>
<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite<br>
<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud.</div>
<p>{{Compat("css.properties.user-select")}}</p>
</div>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>{{Cssxref("::selection")}}</li>
<li>The JavaScript {{domxref("Selection")}} object.</li>
<li><a href="http://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a> in <a href="http://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
</ul>
|
