CSS deshabilitar la selección de texto

93

Actualmente, he puesto esto en la etiqueta del cuerpo para deshabilitar las selecciones de texto:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Sin embargo, las cajas my inputy textareaahora no se pueden seleccionar. ¿Cómo puedo hacer que solo estos elementos de entrada se puedan seleccionar y el resto no se pueda seleccionar?

Neil
fuente
Puedo seleccionar inputy textareaelementos: jsfiddle.net/Smy26
Sampson
Parece que webkit permite la selección de esos elementos, pero moz no.
Christian

Respuestas:

172

No aplique estas propiedades a todo el cuerpo. Muévalos a una clase y aplique esa clase a los elementos que desea deshabilitar seleccione:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
Algo de victoria
fuente
3
No es compatible con Chrome, Safari.
Knutole
5
@knutole Lee la tabla de nuevo. El valor de elementno es compatible con Chrome / Safari.
MForMarlon
31

También puede deshabilitar la selección de usuario en todos los elementos:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

Y luego habilítelo en los elementos que desea que el usuario pueda seleccionar:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}
Rik
fuente
1
Para una compatibilidad total con el navegador, debe agregar los siguientes atributos a su elemento <body> o <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * úselo con cuidado, el último atributo puede AFECTAR LA FUNCIONALIDAD EXISTENTE * /
Dan
11

Solo quería resumir todo:

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>
Meglio
fuente
1
Las versiones antiguas de Firefox podrían requerir agregar un atributo más a HTML: onmousedown = "return false"
Dan
2
::selection,::moz-selection {color:currentColor;background:transparent}
BT
fuente
Como se indica aquí w3schools.com/cssref/sel_selection.asp . Esto no forma parte de ninguna especificación CSS hasta ahora, y Firefox requiere -moz-. Así que lo correcto debería ser: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}
Vladislav
1
@Vladislav Buen punto sobre el prefijo moz. Honestamente, no confíes en w3schools. Es una fuente tan terrible. MDN proporciona las versiones reales de compatibilidad del navegador y señala que :: la selección se eliminó del borrador de CSS, PERO se agregó nuevamente: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Otra nota, Firefox está listo para eliminar la necesidad del prefijo: bugzilla.mozilla.org/show_bug.cgi?id=509958
BT
2

puedes deshabilitar todas las selecciones

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

ahora puede habilitar la entrada y habilitar el área de texto

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}
Shahnawaz
fuente
1

Utilice un selector de comodines *para este propósito.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Ahora, cada elemento dentro de un div con id divno tendrá selección.

Manifestación

Starx
fuente
0

en lugar de bodyescribir una lista de elementos que desee.

Eric Fortis
fuente
0

Deshabilitar la selección en todas partes

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
cristianojeda
fuente