css - Het markeren van tekstselectie uitschakelen

Voor ankers die werken als knoppen (bijvoorbeeld Vragen, Tags, Gebruikers, etc. die zich bovenaan de Stack bevinden&nbsp ;Overlooppagina) of tabbladen, is er een standaard CSS-manier om het markeringseffect uit te schakelen als de gebruiker per ongeluk de tekst selecteert?

Ik realiseer me dat dit met JavaScript kan worden gedaan en een beetje googlen leverde de Mozilla-only -moz-user-selectoptie op.

Is er een standaardconforme manier om dit met CSS te bereiken, en zo niet, wat is dan de “best practice”-aanpak?

Antwoord 1, autoriteit 100%

UPDATE januari 2017:

Volgens Kan ikde user-selectwordt momenteel ondersteund in alle browsers behalve Internet Explorer 9 en zijn eerdere versies (maar helaas heeft nogeen leveranciersvoorvoegsel nodig).

Dit zijn alle beschikbare correcte CSS-variaties:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Antwoord 2, autoriteit 11%

In de meeste browsers kan dit worden bereikt met behulp van eigen variaties op de CSS user-selecteigenschap, oorspronkelijk voorgesteld en vervolgens verlaten in CSS 3en nu voorgesteld in CSS UI-niveau 4:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Voor Internet Explorer < 10 en Opera< 15, moet u het kenmerk unselectablegebruiken van het element dat u niet-selecteerbaar wilt maken. U kunt dit instellen met een attribuut in HTML:

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

Helaas is deze eigenschap niet geërfd, wat betekent dat je een attribuut in de start-tag van elk element in de <div>moet plaatsen. Als dit een probleem is, kunt u in plaats daarvan JavaScript gebruiken om dit recursief te doen voor de afstammelingen van een element:

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"));

Update 30 april 2014: deze tree traversal moet opnieuw worden uitgevoerd telkens wanneer een nieuw element aan de tree wordt toegevoegd, maar uit een opmerking van @Han blijkt dat het mogelijk is om dit te vermijden door toe te voegen een gebeurtenishandler mousedowndie unselectableinstelt op het doel van de gebeurtenis. Zie http://jsbin.com/yagekiji/1voor details.

Dit dekt nog steeds niet alle mogelijkheden. Hoewel het onmogelijk is om selecties te starten in niet-selecteerbare elementen, is het in sommige browsers (Internet Explorer en Firefox bijvoorbeeld) nog steeds onmogelijk om selecties te voorkomen die beginnen voor en eindigen na het niet-selecteerbare element zonder het hele document onselecteerbaar te maken.

Antwoord 3, autoriteit 3%

Tot de user-selectvan CSS 3 eigenschap beschikbaar komt, Gecko-gebaseerde browsers ondersteunen de -moz-user-selecteigenschap die je al hebt gevonden. WebKiten Blink-gebaseerde browsers ondersteunen de -webkit-user-selecteigendom.

Dit wordt natuurlijk niet ondersteund in browsers die de Gecko-renderingengine niet gebruiken.

Er is geen snelle en gemakkelijke manier om dit te doen die aan de “standaarden” voldoet; JavaScript gebruiken is een optie.

De echte vraag is: waarom wil je dat gebruikers bepaalde elementen niet kunnen markeren en vermoedelijk niet kunnen kopiëren en plakken? Ik ben nog geen enkele keer tegengekomen dat ik gebruikers een bepaald gedeelte van mijn website niet wilde laten uitlichten. Verschillende van mijn vrienden gebruiken, na vele uren lezen en schrijven van code, de markeerfunctie als een manier om te onthouden waar ze zich op de pagina bevonden, of om een markering te geven zodat hun ogen weten waar ze de volgende keer moeten kijken.

De enige plaats waar ik kan zien dat dit nuttig is, is als je knoppen hebt voor formulieren die niet mogen worden gekopieerd en geplakt als een gebruiker de website kopieert en plakt.

Antwoord 4, autoriteit 3%

Een JavaScript-oplossing voor Internet Explorer is:

onselectstart="return false;"

Antwoord 5, autoriteit 2%

Als u tekstselectie voor alles wilt uitschakelen, behalve voor <p>-elementen, kunt u dit doen in CSS (kijk uit voor de -moz-nonedie staat overschrijven toe in subelementen, wat in andere browsers is toegestaan met 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;
}

Antwoord 6, autoriteit 2%

In de oplossingen in eerdere antwoorden is de selectie gestopt, maar de gebruiker denkt nog steeds dat je tekst kunt selecteren omdat de cursor nog steeds verandert. Om het statisch te houden, moet je je CSS-cursor instellen:

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

7

U kunt dit doen in Firefox en Safari (Chrome ook?)

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

8

Workaround for webkit :

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

Ik vond het in een cardflip-voorbeeld.

9

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

10

U kunt CSS of JavaScript gebruiken.

De Javascript Way wordt ondersteund in Ouder browsers, zoals Old versies van internet & nbsp; Explorer ook, maar als het niet jouw zaak is, Gebruik de CSS Way dan:

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>

11

Voor Internet Explorer moet u bovendien pseudo class focus(.ClassName:focus) en outline-style: nonetoevoegen.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

Antwoord 12

Probeer deze rijen in de CSS in te voegen en roep de “disHighlight” bij class-eigenschap:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Antwoord 13

Een snelle hackupdate

Als u de waarde nonegebruikt voor alle CSS user-select-eigenschappen (inclusief browservoorvoegsels ervan), is er een probleem dat hierdoor nog steeds kan optreden .

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

Zoals CSS-Trickszegt, is het probleem is:

WebKitstaat nog steeds toe dat de tekst wordt gekopieerd, als u er elementen omheen selecteert.

Je kunt de onderstaande ook gebruiken om enforcedat een heel element wordt geselecteerd, wat betekent dat als je op een element klikt, alle tekst die in dat element zit, wordt geselecteerd. Hiervoor hoef je alleen de waarde nonete wijzigen in all.

.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  */
}

Antwoord 14

Voor degenen die problemen hebben om hetzelfde te bereiken in de Android-browser met de touch-gebeurtenis, gebruik:

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

Antwoord 15

Met SASS(SCSS-syntaxis)

Je kunt dit doen met een mixin:

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}
// No selectable element
.no-selectable {
    @include disable-selection;
}

In een HTML-tag:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Probeer hetin deze CodePen.

Als je een autoprefixergebruikt, kun je andere voorvoegsels verwijderen.

Browsercompatibiliteit hier.

Antwoord 16

Als je Minderen Bootstrapzou je kunnen schrijven:

.user-select(none);

Antwoord 17

-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');

Antwoord 18

Werken

CSS:

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

Dit zou moeten werken, maar het zal niet werken voor de oude browsers. Er is een probleem met de browsercompatibiliteit.

Antwoord 19

Afgezien van het onroerend goed van Mozilla, nee, is er geen manier om tekstkeuze uit te schakelen met alleen standaard CSS (vanaf nu).

Als u opmerkt, schakelt Stack Overflow tekstselectie niet uit voor hun navigatieknoppen, en ik zou aanraden om dit in de meeste gevallen te doen, omdat het het normale selectiegedrag aanpast en het conflict maakt met de verwachtingen van een gebruiker.

20

Dit werkt in Sommige browsers:

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

Voeg eenvoudig uw gewenste elementen / ID’s toe voor de selectoren gescheiden door komma’s zonder spaties, zoals SO:

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

De andere antwoorden zijn beter; Dit moet waarschijnlijk worden gezien als een laatste resort / catchall.

21

Stel dat er twee divs is zoals dit:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/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>

Antwoord 22

Dit is handig als kleurselectie ook niet nodig is:

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

…alle andere browserfixes. Het werkt in Internet Explorer 9of hoger.

Antwoord 23

Voeg dit toe aan de eerste div waarin u de selectie voor tekst wilt uitschakelen:

onmousedown='return false;' 
onselectstart='return false;'

Antwoord 24

OPMERKING:

Het juiste antwoord is juist omdat het voorkomt dat u de tekst kunt selecteren. Het verhindert echter niet dat je de tekst kunt kopiëren, zoals ik zal laten zien met de volgende paar screenshots (vanaf 7 november 2014).

Zoals je kunt zien, konden we de nummers niet selecteren, maar wel kopiëren.

Getest op: Ubuntu, Google Chrome38.0.2125.111.

Antwoord 25

Het is gemakkelijk te doen met:

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

Alternatief:

Stel dat je een <h1 id="example">Hello, World!</h1>hebt. Je moet de innerHTML van die h1verwijderen, in dit geval Hello, World. Dan moet je naar CSS gaan en dit doen:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.
    display: block; // To make sure it works fine in every browser.
}

Nu denkt het gewoon dat het een blokelement is en geen tekst.

Antwoord 26

Dit is geen CSS, maar het is het vermelden waard:

jQuery UI Selectie uitschakelen:

$("your.selector").disableSelection();

Antwoord 27

Controleer mijn oplossing zonder 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>

Antwoord 28

Hoewel dit pseudo-element in concepten van CSS Selectors Level 3 was, werd het verwijderd tijdens de fase van de kandidaat-aanbeveling, omdat het erop leek dat het gedrag onvoldoende was gespecificeerd, vooral met geneste elementen, en interoperabiliteit niet werd bereikt.

Het wordt besproken in Hoe ::selection werkt op geneste elementen.

Ondanks dat het wordt geïmplementeerd in browsers, kunt u de illusie wekken dat tekst niet wordt geselecteerd door dezelfde kleur en achtergrondkleur te gebruiken bij selectie als bij het tabbladontwerp (in uw geval).

Normaal CSS-ontwerp

p { color: white;  background: black; }

Bij selectie

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Gebruikers niet toestaan de tekst te selecteren, leidt tot bruikbaarheidsproblemen.

Previous articleControleren of een tekenreeks een substring in Ruby

Next articleWat is een goede hex-editor/viewer voor de Mac?

Het markeren van tekstselectie uitschakelen