Pseudo Élément CSS ::selection

❮ Précédent Suivant ❯

Le pseudo-élément ::selection est la partie surlignée du document. Il est utilisé pour définir la couleur du texte lorsqu'il est sélectionné.

La couleur par défaut de la sélection du texte est bleu, et cette propriété est utilisée pour changer la couleur initiale.

Seules quelques propriétés CSS peuvent être utilisées pour styler le pseudo-élément ::selection:

Le préfixe -moz- est utilisé avec ce sélecteur dans la forme: ::-moz-selection.

Ce pseudo-élément a été introduit dans CSS Selectors Level 3 mais a été supprmié, actuellement il est dans Pseudo-Elements Level 4.

Version

CSS Pseudo-Elements Level 4

Syntaxe

::selection {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ::-moz-selection { 
      color: #eee;
      background: #8ebf42;
      }
      ::selection {
      color: #eee;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::selection</h2>
    <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
  </body>
</html>

Essayez-vous-même!

Sélectionnez le texte pour voir les couleurs:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .green::-moz-selection{
      background-color: #8ebf42;
      }
      .green::selection{
      background-color: #8ebf42;
      }
      .yellow::-moz-selection{
      background-color: #1c87c9;
      }
      .yellow::selection{
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur ::selection</h2>
    <p>C'est un texte avec background-color initiale de sélection.</p>
    <p class="green">Sélectionnez le texte pour voir un arrière-plan vert.</p>
    <p class="yellow">Sélectionnez le texte pour voir un arrière-plan jaune.</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple du pseudo-élément ::selection avec les éléments <textarea> et <input>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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>
    <h2>Exemple du sélecteur ::selection</h2>
    <p>Élément input</p>
    <form><input type="text" value="Sélectionnez ce texte input" /></form>
    <p>Élément textarea</p>
    <textarea rows="5" cols="25">Sélectionnez ce texte textarea</textarea>
  </body>
</html>