user-select

Die CSS-Eigenschaft user-select steuert, wie Text in einem Element ausgewählt werden darf. Zum Beispiel kann sie verwendet werden, um Text nicht auswählbar zu machen.

.row-of-icons {
  -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 */      
}

Dies ist nützlich in Situationen, in denen Sie eine einfachere/sauberere Kopieren-und-Einfügen-Erfahrung für Benutzer bieten möchten (um zu vermeiden, dass sie versehentlich nutzlose Dinge wie Symbole oder Bilder auswählen). Allerdings ist sie etwas fehlerhaft. Firefox erzwingt, dass jeglicher Text, der auf diesen Selektor passt, nicht kopiert werden kann. WebKit erlaubt immer noch das Kopieren des Textes, wenn Sie Elemente darum herum auswählen.

Sie können dies auch verwenden, um zu erzwingen, dass ein gesamtes Element ausgewählt wird

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

Hier sind einige Demos davon

Siehe den Stift user-select demo von Chris Coyier (@chriscoyier) auf CodePen.

Für diese Eigenschaft gab es eine ganze Weile keine Spezifikation, aber jetzt ist sie unter CSS Basic User Interface Module Level 4 abgedeckt.

Der Standardwert ist auto, was die Auswahl normal wie erwartet ermöglicht. "Normal" ist etwas kompliziert. Es lohnt sich, hier aus der Spezifikation zu zitieren:

• Auf den Pseudo-Elementen ::before und ::after ist der berechnete Wert none
• Wenn das Element ein **editierbares Element** ist, ist der berechnete Wert contain
• Andernfalls, wenn der berechnete Wert von user-select auf dem Elternteil dieses Elements all ist, ist der berechnete Wert all
• Andernfalls, wenn der berechnete Wert von user-select auf dem Elternteil dieses Elements none ist, ist der berechnete Wert none
• Andernfalls ist der berechnete Wert text

Mit anderen Worten, es kaskadiert intelligent und setzt sich in einen sinnvollen Zustand zurück. Es scheint, *vielleicht* könnte diese Funktion verwendet werden, um Pseudo-Elemente auswählbar zu machen, aber es gibt noch kein endgültiges Wort dazu.

Ältere/Proprietäre

Firefox unterstützt -moz-none, was wie none ist, nur dass es bedeutet, dass Unterelemente die Kaskade überschreiben und mit -moz-user-select: text; wieder auswählbar werden können. Seit Firefox 21 verhält sich none wie -moz-none.

Internet Explorer unterstützt ebenfalls einen bisher proprietären Wert, element, bei dem Sie Text innerhalb des Elements auswählen können, die Auswahl aber an den Grenzen dieses Elements stoppt.

Weitere Informationen

• MDN Docs
• Interoperabilität der Benutzer-Auswahl

Browser-Unterstützung

Dies ist speziell für -*-user-select: none;