Comment Changer la Couleur Initiale de la Sélection de Texte Avec CSS

Table de Contenus

  1. Comment Changer la Couleur de la Police Lorsqu'on Surligne un Texte
  2. Comment Changer la Couleur de l'Arrière-plan Lorsqu'on Surligne un Texte
  3. Comment Changer la Couleur de l'Ombre de Texte Lorsqu'on sélectionne un Texte
  4. Comment Changer la Couleur des Champs Textarea et Input Lorsqu'on sélectionne un Texte
  5. Comment Changer la Couleur de la Sélection de l'image
  6. Comment Obtenir des Effets de Sélection Différents Sur les Mêmes Éléments Sur la Page
  7. Comment Appliquer des Effets de Sélection à la Page Entière

Chaque fois un utilisateur sélectionne un texte pour le surligner, il prend automatiquement la couleur de l'arrière-plan et parfois il modifie également la couleur du texte. Si vous n'avez pas le remarqué avant, il vous suffit de sélectionner cette phrase pour voir la couleur de l'arrière-plan au délà du texte.

Si la couleur bleu initiale vous dérange pour quelque raison, peut-être à cause de la contradiction entre cette couleur et le design de votre site web, vous devez changer la couleur de surligne, CSS3 vous donne cet opportunité!

Le pseudo-élément ::selection est l'une des meilleures caractéristiques de CSS3 qui surcharge la couleur de surligne de texte fournie par le navigateur ou par le système et permet de spécifier la couleur et l'arrière-plan des textes que les utilisateurs sélectionnent.

Vous pouvez modifier la couleur ou la couleur de l'arrière-plan de quelques éléments spécifiques ou de votre site web totalement.

Cependant, le nombre des propriétés qui peuvent être utilisées avec ce pseudo sélecteur, est très limité . Essentiellement, à l'aide du pseudo élément ::selection, les valeurs des 3 propriétés, telles que color, background-color et text-shadow, peuvent être changées. Dans cet article, nous allons montrer l'effet sur chacune de ces propriétés.

Pour la compatibilité de navigateurs, utilisez l'extension de propriété -moz- pour obtenir le support de Firefox (::-moz-selection).

Comment Changer la Couleur de la Police Lorsqu'on Surligne un Texte

Afin de changer la couleur de l'élément, il vous suffit de styler cet élément avec le pseudo-élément ::selection. Vous pouvez changer juste la couleur de la police ou la couleur de la police ainsi que de l'arrière-plan en sélection.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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">Sélectionnez ce texte pour voir la couleur verte de police avec son arrière-plan par défaut.</p>
    <p class="bg-green">Sélectionnez ce texte pour voir la couleur de police par défaut avec l'arrière-plan vert.</p>
    <p class="bg-transparent">Sélectionnez ce texte pour voir la couleur verte de police sans aucune couleur de l'arrière-plan.</p>
    <p class="white-green">Sélectionnez ce texte pour voir la couleur blanche de police avec l'arrière-plan vert.</p>
  </body>
</html>

Notez que dans l'exemple donné, la couleur initiale de l'arrière-plan est la couleur de ce site.

Comment Changer la Couleur de l'Arrière-plan Lorsqu'on Surligne un Texte

Le même est ici pour la couleur de l'arrière-plan. Stylez l'élément avec ::selection et définissez votre couleur préférée pour la propriété background-color.

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: #ffcc00;
      }
      .yellow::selection {
        background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <p>C'est un texte avec la couleur initiale de la sélection de l'arrière-plan.</p>
    <p class="green">Sélectionnez ce texte pour voir un arrière-plan vert.</p>
    <p class="yellow">Sélectionnez ce texte pour voir un arrière-plan jaune.</p>
  </body>
</html>
Au cas où vous ne voulez pas aucune couleur de l'arrière-plan lors de la sélection, définissez la valeur "transparent" de la propriété background-color.

Comment Changer la Couleur de l'Ombre de Texte Lorsqu'on sélectionne un Texte

Continuez avec le pseudo-élément ::selection et ajoutez, supprimez ou changez même le type des effets de l'ombre de texte sur sélection.

Vous devez spécifier la propriété text-shadow pour le pseudo-élément ::selection.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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">Sélectionnez ce texte pour obtenir l'ombre de texte.</p>
    <p class="shadow2">Sélectionnez ce texte pour supprimer l'ombre de texte.</p>
    <p class="shadow3">Sélectionnez ce texte pour le faire plus clair.</p>
    <p class="shadow4">Sélectionnez ce texte pour changer la couleur de l'ombre.</p>
  </body>
</html>

Comment Changer la Couleur des Champs Textarea et Input Lorsqu'on sélectionne un Texte

Il est aussi possible de changer la couleur de la sélection du texte pour les champs de <textarea> et <input>. Voyez l'exemple suivant avec le 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>
    <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>

Comment Changer la Couleur de la Sélection de l'image

Changez la couleur de la sélection d'une image à l'aide du pseudo-élément ::selection. Voyez l'exemple donné pour mieux comprendre.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
        padding: 10px;
      }
      #img2::-moz-selection {
        background-color: #d9d9d9;
      }
      #img2::selection {
        background-color: #d9d9d9;
      }
    </style>
  </head>
  <body>
    <p>Ici la couleur de la sélection pour la deuxième image est gris.</p>
    <p>Sélectionnez les deux images pour voir la différence.</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>

Comment Obtenir des Effets de Sélection Différents Sur les Mêmes Éléments Sur la Page

Imaginons vous avez 4 paragraphes et vous voulez avoir les certaines couleurs de la sélection pour chacun.

Ce que vous devez faire, c'est changer la couleur de la sélection pour les paragraphes différents ou des séctions différentes de la page avec les classes différentes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</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">Sélectionnez ce texte pour voir la couleur verte de surligne.</p>
    <p class="blue">Sélectionnez ce texte pour voir la couleur bleu de surligne.</p>
    <p class="yellow">Sélectionnez ce texte pour voir la couleur jaune de surligne.</p>
    <p class="red">Sélectionnez ce texte pour voir la couleur rouge de surligne.</p>
  </body>
</html>
Même si le bloc de style fait la même chose, les sélecteurs ne peuvent pas être combinés. Il ne fonctionnera pas si vous les combinez, parce que les navigateurs ignorent le sélecteur entier s'il a une partie il ne comprennent pas ou c'est invalide.

Comment Appliquer des Effets de Sélection à la Page Entière

Appliquez des effet de surligne aux éléments particuliers, cela peut être une perte du temps si vous voulez avoir le même effet sur la page entière de votre site web. En utilisant le pseudo-élément ::selection vous pouvez définir la couleur de la sélection pour la page entière sans l'appliquer avec certains éléments.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ::-moz-selection {
        color: #fff;
        background-color: #8ebf42;
      }
      ::selection {
        color: #fff;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Sélectionnez des éléments multiples sur cette page et voyez que la couleur de la sélection est définie à blanc, et la couleur de l'arrière-plan est définie à vert pour la page entière.</h3>
    <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. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. I
    </p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" />
  </body>
</html>
La déclaration ::selection est largement supportée par les navigateurs. Le problème de compatibilité avec Firefox est corrigé à l'aide du préfixe -moz- avant le sélecteur. En ce qui concerne les tablettes et les appareils mobiliers, ce sélecteur n'est encore supporté par iOS Safari et Opera Mini.
Il n'est pas recommandé de compter sur les caractéristiques CSS non - standardisées, car il y a un risque élèvé que le navigateur web peut supprimer à tout moment le support pour un sélecteur ou un pseudo-élément CSS non officiel. Considérez-les donc strictement comme un ajout non essentiel à l'expérience globale de vos visiteurs et soyez prêt à "rompre" à tout moment.

Styler votre page web avec ce pseudo élément conformément aux couleurs de votre site (au lieu d'utiliser la couleur bleu de la sélection de l'arrière-plan) peut donner une apparence attrayant à votre site web.