Benutzerauswahl - CSS-Tricks | CSS-Almanach 2025

Die user-selectEigenschaft in CSS steuert, wie der Text in einem Element ausgewählt werden darf. Beispielsweise kann es verwendet werden, um die Auswahl von Text aufzuheben.

.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 Benutzern ein einfacheres und übersichtlicheres Kopieren und Einfügen bieten möchten (lassen Sie sie nicht versehentlich nutzlose Dinge wie Symbole oder Bilder per Text auswählen). Es ist jedoch ein bisschen fehlerhaft. Firefox erzwingt die Tatsache, dass Text, der mit diesem Selektor übereinstimmt, nicht kopiert werden kann. Mit WebKit kann der Text weiterhin kopiert werden, wenn Sie Elemente um ihn 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:

Sehen Sie sich die vom Benutzer ausgewählte Pen-Demo von Chris Coyier (@chriscoyier) auf CodePen an.

Es gab eine ganze Weile keine Spezifikation für diese Eigenschaft, aber jetzt wird sie unter CSS Basic User Interface Module Level 4 behandelt.

Der Standardwert ist auto, wodurch die Auswahl wie erwartet normal erfolgt. "Normalerweise" ist etwas kompliziert. Es lohnt sich, hier aus der Spezifikation zu zitieren:

Für die Pseudoelemente :: before und :: after lautet der berechnete Wert none

Wenn das Element ein bearbeitbares Element ist , lautet der berechnete Wertcontain

Andernfalls ist der berechnete Wert, wenn der berechnete Wert von user-select auf dem übergeordneten Element dieses Elements allistall

Andernfalls ist der berechnete Wert, wenn der berechnete Wert von user-select auf dem übergeordneten Element dieses Elements noneistnone

Andernfalls ist der berechnete Wert text

Mit anderen Worten, es kaskadiert intelligent und wird in einen sinnlichen Zustand zurückgesetzt. Es sieht so aus, als ob diese Funktion verwendet werden könnte, um Pseudoelemente auswählbar zu machen, aber noch kein endgültiges Wort.

Älter / Proprietär

Firefox unterstützt -moz-none, was genau wie keine ist, außer dass Unterelemente die Kaskade überschreiben und mit -moz-user-select: text;Firefox 21 wieder auswählbar werden können. Ab Firefox 21 verhält sich keines so -moz-none.

Internet Explorer unterstützt auch einen bisher proprietären Wert, elementbei dem Sie Text innerhalb des Elements auswählen können, die Auswahl jedoch an den Grenzen dieses Elements endet.

Mehr Informationen

MDN Docs
Benutzer Interoperabilität auswählen

Browser-Unterstützung

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

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.