Wie kann man die Standardfarbe der Textauswahl mit CSS ändern

Inhaltsverzeichnis

  1. Wie kann man die Schriftfarbe beim Hervorheben eines Textes ändern
  2. Wie kann man die Hintergrundfarbe beim Hervorheben eines Textes ändern
  3. Wie kann man die Farbe des Textschattens bei der Auswahl eines Textes ändern
  4. Wie kann man die Farbe des Textbereichs und der Eingabefelder bei der Auswahl eines Textes ändern
  5. Wie kann man die Farbe des Bildselektors ändern
  6. Wie kann man unterschiedliche Selektionseffekte auf die gleichen Elemente auf einer Seite haben
  7. Wie kann man Auswahleffekte auf die gesamte Seite anwenden

Jedes Mal, wenn ein Benutzer einen Text auswählt, um ihn hervorzuheben, nimmt er automatisch eine Hintergrundfarbe an und ändert manchmal auch die Farbe des Textes. Wenn Sie das noch nicht bemerkt haben, wählen Sie einfach diesen Satz aus, um die Hintergrundfarbe hinter dem Text zu sehen.

Wenn die standardmäßige blaue Farbe Sie stört oder aus irgendeinem Grund, vielleicht im Zusammenhang mit Ihrem Website-Design, müssen Sie die Highlight-Farbe ändern, CSS3 gibt Ihnen diese Möglichkeit!

Das Pseudo-Element ::selection ist eine der coolen Funktionen von CSS3, die die Farbe der Texthervorhebung auf Browser- oder Systemebene überschreibt und es ermöglicht, die Farbe und den Hintergrund für vom Benutzer ausgewählte Texte festzulegen.

Sie können die Farbe oder Hintergrundfarbe einiger bestimmter Elemente oder der gesamten Website ändern.

Die tatsächlichen Eigenschaften, die mit diesem Pseudo-Selektor verwendet werden können, sind jedoch sehr begrenzt. Im Wesentlichen können mit Hilfe des Pseudo-Elements ::selection die Werte von nur 3 Eigenschaften, wie color, background-color und text-shadow, geändert werden. In diesem Artikel werden wir die Wirkung auf jede dieser Eigenschaften zeigen.

Aus Gründen der Browser-Kompatibilität verwenden Sie die Eigenschaft-Erweiterung -moz-, um Unterstützung von Firefox zu erhalten (::-moz-selection).

Wie kann man die Schriftfarbe beim Hervorheben eines Textes ändern

Um die Farbe eines Elements zu ändern, stylen Sie einfach das Element mit dem Pseudo-Element ::selection. Sie können die Farbe der Schriftart oder der Schriftart zusammen mit dem Hintergrund bei der Auswahl ändern.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .green::-moz-selection{
      color: #8ebf42;
      }
      .green::selection{
      color: #8ebf42;
      background-color: initial;
      }
      .bg-green::-moz-selection{
      background-color: #8ebf42;
      }
      .bg-green::selection{
      background-color: #8ebf42;
      }
      .bg-transparent::-moz-selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .bg-transparent::selection{
      color: #8ebf42;
      background-color: transparent;
      }
      .white-green::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      .white-green::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p class="green">Wählen Sie diesen Text aus, um die grüne Schriftfarbe mit dem Standardhintergrund zu sehen.</p>
    <p class="bg-green">Wählen Sie diesen Text aus, um die Standardschriftfarbe mit grünem Hintergrund zu sehen.</p>
    <p class="bg-transparent">Wählen Sie diesen Text aus, um die grüne Schriftfarbe ohne Hintergrundfarbe zu sehen.</p>
    <p class="white-green">Wählen Sie diesen Text aus, um die weiße Schriftfarbe mit grüner Hintergrundfarbe zu sehen.</p>
  </body>
</html>

Bemerken Sie, dass im angegebenen Beispiel die Standardhintergrundfarbe die Farbe dieser bestimmten Seite ist.

Wie kann man die Hintergrundfarbe beim Hervorheben eines Textes ändern

Gleiches gilt hier für die Hintergrundfarbe. Stylen Sie das Element einfach mit ::selection und stellen Sie Ihre bevorzugte Farbe für die Eigenschaft background-color ein.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #ffcc00;
      }
      .yellow::selection{
      background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <p>Das ist ein Text mit der standardmäßigen Hintergrundfarbe.</p>
    <p class="green">Wählen Sie diesen Text aus, um einen grünen Hintergrund zu sehen.</p>
    <p class="yellow">Wählen Sie diesen Text aus, um einen gelben Hintergrund zu sehen.</p>
  </body>
</html>
Falls Sie keine Hintergrundfarbe beim Auswählen des Textes haben möchten, verwenden Sie einfach den Wert "transparent" der Eigenschaft background-color.

Wie kann man die Farbe des Textschattens bei der Auswahl eines Textes ändern

Gehen Sie weiter mit dem Pseudo-Element ::selection und fügen Sie sogar den Typ der Textschatteneffekte beim Auswählen des Textes hinzu.

Sie müssen nur die Eigenschaft text-shadow für das Pseudo-Element ::selection angeben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      /* before selection */
      .shadow2{
      text-shadow: 1px 1px 1px;
      }
      .shadow3{
      text-shadow: 1px 2px 4px #000;
      }
      .shadow4{
      text-shadow: 1px 2px 4px;
      }
      /* after selection */
      .shadow1::-moz-selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      .shadow1::selection{
      text-shadow: 1px 1px 1px;
      background-color: transparent;
      }
      #shadow2::-moz-selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow2::selection{
      text-shadow: none;
      background: #fffae6;
      }
      .shadow3::-moz-selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow3::selection{
      text-shadow: 1px 1px 2px #222;
      }
      .shadow4::-moz-selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
      .shadow4::selection{
      text-shadow: 1px 2px 4px #208A28;
      background-color: transparent;
      color: #208A28;
      }
    </style>
  </head>
  <body>
    <p class="shadow1">Wählen Sie diesen Text aus, um den Textschatten zu sehen.</p>
    <p class="shadow2">Wählen Sie diesen Text aus, um den Textschatten zu entfernen.</p>
    <p class="shadow3">Wählen Sie diesen Text aus, um den Text klarer zu machen.</p>
    <p class="shadow4">Wählen Sie diesen Text aus, um die Farbe des Textschattens zu ändern.</p>
  </body>
</html>

Wie kann man die Farbe des Textbereichs und der Eingabefelder bei der Auswahl eines Textes ändern

Es ist auch möglich, die Farbe der Textauswahl für die Felder <textarea> und <input> zu ändern. Sehen Sie folgendes Beispiel mit dem Pseudo-Element ::selection mit den Elementen textarea und input.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      input::-moz-selection{
      color: #1c87c9;
      background-color: #eee;
      }
      input::selection{
      color: #1c87c9;
      background-color: #eee;
      }
      textarea::-moz-selection{
      color: white;
      background-color: #8ebf42;
      }
      textarea::selection{
      color: white;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <p>Input element</p>
    <form><input type="text" value="Wählen Sie den Eingabetext aus" /></form>
    <p>Textarea Element</p>
    <textarea rows="5" cols="25">Wählen Sie den Textarea-Text aus</textarea>
  </body>
</html>

Wie kann man die Farbe des Bildselektors ändern

Ändern Sie die Farbe der Auswahl eines Bildes mithilfe des Pseudoelements ::selection. Sehen Sie das angegebene Beispiel, um ein klares Verständnis zu haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      padding: 10px;
      }
      #img2::-moz-selection{
      background-color: #d9d9d9;
      }
      #img2::selection{
      background-color: #d9d9d9;
      }
    </style>
  </head>
  <body>
    <p>Hier ist die Auswahlfarbe für das zweite Bild auf grau gesetzt.</p>
    <p>Wählen Sie beide Bilder aus, um den Unterschied zu sehen.</p>
    <img id="img1" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
    <img id="img2" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>

Wie kann man unterschiedliche Selektionseffekte auf die gleichen Elemente auf einer Seite haben

Stellen Sie sich vor, dass Sie 4 Absätze haben und für jeden von ihnen bestimmte Auswahlfarben haben möchten.

Dafür müssen Sie die Auswahlfarbe für verschiedene Absätze oder verschiedene Abschnitte der Seite mit verschiedenen Klassen ändern.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p.green::selection {
      background: #8ebf42;
      }
      p.green::-moz-selection {
      background: #8ebf42;
      }
      p.blue::selection {
      background: #1c87c9;
      }
      p.blue::-moz-selection {
      background: #1c87c9;
      }
      p.yellow::selection {
      background: #ffcc00;
      }
      p.yellow::-moz-selection {
      background: #ffcc00;
      }
      p.red::selection {
      background: #ff6666;
      }
      p.red::-moz-selection {
      background: #ff6666;
      }
    </style>
  </head>
  <body>
    <p class="green">Wählen Sie den Text aus, um die grüne Markierungsfarbe zu sehen.</p>
    <p class="blue">Wählen Sie den Text aus, um die blaue Markierungsfarbe zu sehen.</p>
    <p class="yellow">Wählen Sie den Text aus, um die gelbe Markierungsfarbe zu sehen.</p>
    <p class="red">Wählen Sie den Text aus, um die rote Markierungsfarbe zu sehen.</p>
  </body>
</html>
Auch wenn der Style-Block dasselbe tut, können die Selektoren nicht kombiniert werden. Es wird nicht funktionieren, wenn Sie sie kombinieren. Die Browser ignorieren den gesamten Selektor, wenn es einen Teil davon gibt, den sie nicht verstehen oder der ungültig ist.

Wie kann man Auswahleffekte auf die gesamte Seite anwenden

Die Anwendung der Markierungseffekte auf ein bestimmtes Element kann Zeitverschwendung sein, wenn Sie den gleichen Effekt auf der gesamten Seite Ihrer Webseite verwenden möchten. Über das Pseudoelement ::selection können Sie die Auswahlfarbe für die gesamte Seite festlegen, ohne sie auf bestimmte Elemente anzuwenden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ::-moz-selection{
      color: #fff;
      background-color: #8ebf42;
      }
      ::selection{
      color: #fff;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Wählen Sie mehrere Elemente auf dieser Seite aus und stellen Sie sicher, dass die Auswahlfarbe auf Weiß und die Hintergrundfarbe auf Grün für die gesamte Seite gesetzt ist.</h3>
    <p>Lorem Ipsum ist ein einfacher Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker eine Kombüse vom Typ nahm und sie zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte überlebt, sondern auch den Sprung in den elektronischen Satz, der im Wesentlichen unverändert geblieben ist.</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq">
  </body>
</html>
Die Deklaration ::selection hat eine breite Browserunterstützung. Das Kompatibilitätsproblem mit Firefox wird mithilfe des Präfixes -moz- vor dem Selektor behoben. Apropos Tablett oder mobile Geräte, dieser Selektor wird von iOS Safari und Opera Mini immer noch nicht unterstützt.
Es wird nicht empfohlen, sich auf nicht standardisierte CSS-Funktionen zu verlassen, da das Risiko höher ist, dass ein Webbrowser jederzeit und ohne Vorankündigung die Unterstützung für einen inoffiziellen CSS-Selektor oder ein Pseudoelement entfernt. Betrachten Sie sie daher ausschließlich als eine nicht wesentliche Ergänzung zum Gesamterlebnis Ihrer Besucher und seien Sie bereit, jederzeit eine "Pause" zu machen.

Das Stylen Ihrer Webseite mit diesem Pseudoelement gemäß dem Farbschema Ihrer Website (anstatt die langweilige blaue Hintergrundfarbe zu verwenden) kann Ihrer Webseite einen attraktiven Look verleihen. Für einen bestimmten Teil Ihrer Website können Sie eine Hintergrundfarbe auswählen oder verschiedene Hintergrundfarben für jeden Teil anwenden. Das Ändern der standardmäßigen Auswahleigenschaften, wie immer Sie möchten, kann immer zu einer besseren Ansicht und damit zu einer besseren Benutzerfreundlichkeit führen.