css - w3schools - Come disabilitare l'evidenziazione della selezione del testo?




w3s user select (20)

È una soluzione JavaScript per IE

onselectstart="return false;"

Per gli ancoraggi che agiscono come pulsanti (ad esempio, Domande , Tag , Utenti , ecc. Nella parte superiore della pagina Overflow dello stack) o schede, esiste un metodo CSS standard per disabilitare l'effetto di evidenziazione se l'utente seleziona accidentalmente il testo?

Mi rendo conto che ciò potrebbe essere fatto con JavaScript, e un po 'di googling ha prodotto l'opzione di -moz-user-select only di Mozilla.

Esiste un modo conforme allo standard per realizzare questo con i CSS e, in caso negativo, qual è l'approccio "best practice"?


A parte la proprietà di Mozilla, no, non c'è modo di disabilitare la selezione del testo con il solo CSS standard (al momento).

Se si nota, non disabilita la selezione del testo per i pulsanti di navigazione, e nella maggior parte dei casi consiglierei di non farlo, poiché modifica il normale comportamento di selezione e lo rende in conflitto con le aspettative dell'utente.


Ciò sarà utile se la selezione del colore non è necessaria:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... tutte le altre correzioni del browser. Funzionerà in Internet Explorer 9 o versioni successive.


Controlla la mia soluzione senza JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Menu a comparsa con la mia tecnica applicata: http://jsfiddle.net/y4Lac/2/


Funziona in alcuni browser:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Basta aggiungere gli elementi / id desiderati davanti ai selettori separati da virgole senza spazi, in questo modo:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Le altre risposte sono migliori; questo dovrebbe probabilmente essere visto come un ultimo ricorso / catchall.


Ho imparato dal sito Web CSS-Tricks .

user-select: none;

E anche questo:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Nella maggior parte dei browser, questo può essere ottenuto utilizzando variazioni proprietarie sulla proprietà di user-select CSS, originariamente proposta e poi abbandonata in CSS3 e ora proposta in UI Livello 4 CSS :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Per IE <10 e Opera <15, dovrai utilizzare l'attributo unselectable dell'elemento che desideri non essere selezionabile. Puoi impostarlo utilizzando un attributo in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Purtroppo questa proprietà non è ereditata, il che significa che devi inserire un attributo nel tag di inizio di ogni elemento all'interno di <div> . Se questo è un problema, puoi invece usare JavaScript per farlo in modo ricorsivo per i discendenti di un elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Aggiornamento 30 aprile 2014 : l'attraversamento di questo albero deve essere rieseguito ogni volta che un nuovo elemento viene aggiunto all'albero, ma sembra da un commento di @Han che è possibile evitarlo aggiungendo un gestore di eventi mouse che imposta unselectable su il bersaglio dell'evento. Vedi http://jsbin.com/yagekiji/1 per i dettagli.

Questo ancora non copre tutte le possibilità. Mentre è impossibile avviare selezioni in elementi non selezionabili, in alcuni browser (ad esempio IE e Firefox) è ancora impossibile impedire selezioni che iniziano prima e terminano dopo l'elemento non selezionabile senza rendere non selezionabile l'intero documento.


Nelle soluzioni di cui sopra la selezione viene interrotta, ma l'utente pensa ancora di poter selezionare il testo perché il cursore cambia ancora. Per mantenerlo statico, dovrai impostare il tuo cursore CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Ciò renderà il tuo testo totalmente piatto, come se fosse in un'applicazione desktop.


Per coloro che hanno difficoltà a ottenere lo stesso risultato nel browser Android con l'evento touch, utilizzare:

html,body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

Per ottenere il risultato di cui avevo bisogno ho scoperto che dovevo usare sia ::selection che user-select

input.no-select:focus { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

input.no-select::selection { 
    background: transparent; 
}

input.no-select::-moz-selection { 
    background: transparent; 
}

Puoi farlo in Firefox e Safari (anche Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

Puoi usare CSS o JavaScript per questo, il modo in cui JavaScript è supportato in browser meno recenti come IE vecchi, ma se non è il tuo caso, usa la modalità CSS allora:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>


Se stai usando Less e Bootstrap puoi scrivere:

.user-select(none);

Se vuoi disabilitare la selezione del testo su tutto tranne che sugli elementi <p> , puoi farlo in CSS (fai attenzione a -moz-none che consente l'override nei sottoelementi, che è permesso in altri browser con none ):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Soluzione alternativa per WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

L'ho trovato in un esempio di CardFlip.


Supponiamo che ci siano due div in questo modo

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Imposta il cursore sul valore predefinito in modo che dia un tocco non selezionabile all'utente /

Il prefisso deve essere utilizzato per supportarlo in tutti i browser senza prefisso, questo potrebbe non funzionare in tutte le risposte.


Aggiornamento rapido del hack: marzo 2017 -da CSS-Tricks

Se si inserisce il valore 'none' per tutti gli attributi CSS user select come mostrato in seguito, c'è un problema che può ancora verificarsi.

.div{
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;   /* Firefox all */
  -ms-user-select: none;  /* IE 10+ */
   user-select: none;  /* Likely future */ 
}

Come dice CSS-Tricks , i problemi sono

  • WebKit consente comunque di copiare il testo se si selezionano elementi attorno ad esso.

Quindi puoi anche usare quello sotto per rinforzare l'intero elemento selezionato, che è la soluzione al problema. Tutto quello che devi fare è cambiare il valore 'none' in 'all' che assomiglierebbe a questo

.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

Lavoro

CSS:

 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
  user-select: none;
 -webkit-touch-callout: none;
 -webkit-user-select: none;

Questo dovrebbe funzionare, ma non funzionerà con i vecchi browser. Esiste un problema di compatibilità del browser.


.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Non è il modo migliore, però.


-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select:none;
-moz-user-select:none;
onselectstart="return false;"
::selection { background: transparent; }
::-moz-selection { background: transparent; }

* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}

p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }
if ($.browser.msie) $('.draggable').find(':not(input)').attr('unselectable', 'on');




textselection