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?

css

— Neil
fuente

Puedo seleccionar inputy textareaelementos: jsfiddle.net/Smy26

— Sampson

Parece que webkit permite la selección de esos elementos, pero moz no.

— Christian

5

posible duplicado de la regla CSS para deshabilitar el resaltado de la selección de texto

— Mottie

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

Estoy de acuerdo con Someth Victory, necesitas agregar una clase específica a algunos elementos que quieres que no se puedan seleccionar.

Además, puede agregar esta clase en casos específicos usando javascript. Ejemplo aquí Hacer que el contenido no se pueda seleccionar con la ayuda de CSS .

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