Editierung und Selektierung von Text

Autor: Aykut Şensoy, Datum: 08.10.2023

CSS bietet eine Reihe von Möglichkeiten an, wenn es um die Editierung und Selektierung von Text geht. Grundsätzlich lässt sich jedes HTML-Element editierbar machen. Umgekehrt ist es auch möglich die Editierung von Text gänzlich zu unterbinden, indem man die Selektierung von Text per CSS ausschaltet. Ebenso lässt sich das Aussehen von selektiertem Text beeinflussen. Man kann sogar die Farbe des blinkenden Cursors bei der Texteingabe verändern.

Text editierbar machen

Fangen wir zuerst mit der Möglichkeit an, Text editierbar zu machen. HTML bietet dafür eine ganz simple Lösung in Form eines globalen Attributs an. Man definiert einfach an einem beliebigen HTML-Tag das Attribut contenteditable="true".

Hier das funktionierende Beispiel. Einfach auf den Text klicken und editieren.

<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim non purus fermentum volutpat.
</p>

Farbe des blinkenden Cursors ändern

Um die Farbe des blinkenden Cursors zu ändern, muss man per CSS die Deklaration "caret-color" auf eine beliebige Farbe setzen. Die Default-Definition für "caret-color" ist zwar auto, aber die Browser nutzen in der Regel standardmäßig caret-color: currentColor; als Farbdefinition.

Nehmen wir das obere Beispiel und färben den Text rot. Man sieht, dass der Cursor beim Editieren automatisch die aktuelle Textfarbe annimmt.

Jetzt färben wir den Text blau, aber möchten, dass der Cursor beim Editieren rot gefärbt ist. In diesem Fall müssen wir explizit die Deklaration caret-color: red; definieren.

Ein besonderer Fall wäre in diesem Kontext noch wichtig zu erwähnen. Es ist ja in CSS möglich als Farbdefinition "transparent" anzugeben. In diesem Fall hätte man den lustigen Effekt, dass der blinkende Cursor zwar vorhanden, aber nicht zu sehen ist.

Selektierung von Text unterbinden

Es ist in jedem Betriebssystem möglich Texte mit Hilfe von Eingabegeräten, wie zum Beispiel der Maus, zu selektieren. Es ist auch möglich Texte auf Touch-Devices mit Gesten zu selektieren. HTML erlaubt dieses System-Feature mit Hilfe der CSS Deklaration user-select: none; im Web-Browser zu deaktivieren. Dabei ist zu beachten, dass für Safari zusätzlich noch die -webkit Vendor-Präfix Notation notwendig ist. Probieren Sie es aus und versuchen Sie im unteren Beispiel den Text zu selektieren, es ist nicht mehr möglich.

<p style="user-select: none; -webkit-user-select: none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim non purus fermentum volutpat.
</p>

Interessant wird es, wenn man das Attribut contenteditable="true" mit der Deklaration user-select: none; kombinieren möchte. In diesem Fall wird "user-select" komplett ignoriert. Wie sie im folgenden Beispiel sehen können, bleibt der Text trotz user-select: none; editierbar und selektierbar. Ich denke, dass dieses Verhalten Sinn macht, weil es sonst dem WYSIWYG-Paradigma widersprechen würde. Man muss immer vorher etwas markieren, um es zu bearbeiten. Wenn es sich nicht markieren lässt, macht es also auch keinen Sinn es bearbeitbar zu machen.

Ich denke am besten wird dieses Verhalten deutlich, wenn man einen Teil des editierbaren Textes wieder auf nicht-editierbar stellt. Im folgenden Beispiel habe ich den rot markierten Teil des Textes wieder auf contenteditable: false gestellt. Jetzt sieht man, dass user-select: none; auf dem nicht-editierbaren Teil des Textes greift, aber nicht auf den editierbaren Teil.

  <p contenteditable="true" style="user-select: none; -webkit-user-select: none">
  Lorem ipsum dolor sit amet, <span contenteditable="false" style="color: red">consectetur adipiscing elit.</span> Phasellus eu enim non purus fermentum volutpat.
  </p>
  

Selektierten Text formatieren

Die Standardformatierung des Systems bei selektiertem Text lässt sich mit dem Pseudo-Element "::selection" überschreiben. Am besten schaut man sich das Beispiel unten an. Der selektierte Text hat eine völlig individualisierte Text- und Hintergrundfarbe.

<style>
p::selection {
  background-color: purple;
  color: white;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim non purus fermentum volutpat.
</p>

Zu guter Letzt sollten in diesem Kontext 2 wichtige Dinge nicht unerwähnt bleiben. Das Pseudo-Element "::selection" hat starke Einschränkungen, was seine Formatierungsmöglichkeiten betrifft. Es sind nur "color", "background-color", "text-decoration", "text-shadow" sowie "text-stroke" erlaubt. Weiterhin muss erwähnt werden, dass Safari dieses Feature zwar grundsätzlich unterstützt, aber nicht auf den iOS-Geräten.