CSS disabilita la selezione del testo

92

Attualmente, l'ho inserito nel tag body per disabilitare le selezioni di testo:

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

Tuttavia, le mie caselle inpute textareaora non sono selezionabili. Come posso rendere selezionabili solo questi elementi di input e gli altri non selezionabili?

css

— Neil
fonte

Sono in grado di selezionare inputed textareaelementi: jsfiddle.net/Smy26

— Sampson

Sembra che webkit consenta la selezione di questi elementi, ma moz no.

— Christian

5

possibile duplicato della regola CSS per disabilitare l'evidenziazione della selezione del testo

— Mottie

171

Non applicare queste proprietà a tutto il corpo. Spostali in una classe e applica quella classe agli elementi che desideri disabilitare seleziona:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

— Someth Victory
fonte

3

Non supportato in Chrome, Safari.

— knutole

5

@knutole Leggi di nuovo la tabella. Il valore di elementnon è supportato in Chrome / Safari.

— MForMarlon

31

Puoi anche disabilitare la selezione dell'utente su tutti gli elementi:

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

E poi abilitalo sugli elementi che desideri che l'utente possa selezionare:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

— Rik
fonte

1

Per il supporto completo del browser dovresti aggiungere i seguenti attributi al tuo elemento <body> o <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * usa con attenzione, l'ultimo attributo può INFLUENZARE LA FUNZIONALITÀ ESISTENTE * /

— Dan

11

Volevo solo riassumere tutto:

.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
fonte

1

Le vecchie versioni di Firefox potrebbero richiedere l'aggiunta di un altro attributo a HTML: onmousedown = "return false"

— Dan

2

::selection,::moz-selection {color:currentColor;background:transparent}

— BT
fonte

Come affermato qui w3schools.com/cssref/sel_selection.asp . Questo non fa parte di alcuna specifica CSS fino ad ora e Firefox richiede -moz-. Quindi il corretto dovrebbe essere: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}

— Vladislav

1

@Vladislav Buon punto sul prefisso moz. Onestamente, però, non fidarti di w3schools. È una fonte così terribile. MDN fornisce le attuali versioni di compatibilità del browser e osserva che :: selection è stata rimossa dalla bozza CSS, MA è stata aggiunta di nuovo: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Un'altra nota, Firefox è pronto per rimuovere la necessità del prefisso: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

puoi disabilitare tutta la selezione

.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;}

ora puoi abilitare l'input e l'area di testo

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
fonte

1

Utilizzare un selettore di caratteri jolly *per questo scopo.

#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;
}

Ora, ogni elemento all'interno di un div con id divnon avrà alcuna selezione.

Demo

— Starx
fonte

0

invece di bodydigitare un elenco di elementi desiderati.

— Eric Fortis
fonte

0

Sono d'accordo con Someth Victory, devi aggiungere una classe specifica ad alcuni elementi che desideri non siano selezionabili.

Inoltre, puoi aggiungere questa classe in casi specifici utilizzando javascript. Esempio qui Rendere il contenuto non selezionabile con l'aiuto dei CSS .

— starikovs
fonte

0

Disabilita la selezione ovunque

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
fonte