Modification de la couleur de mise en évidence lors de la sélection de texte dans une entrée de texte HTML

Je l’ai cherché sur le Web et je ne trouve même personne qui le demande, encore moins une solution …

Existe-t-il un moyen de modifier la couleur de la zone de surbrillance dans une entrée de texte lorsque le texte est sélectionné? Pas la bordure de mise en évidence ou l’arrière-plan, mais la partie qui apparaît autour du texte lorsque le texte est réellement sélectionné.

c’est le code.

/*** Works on common browsers ***/ ::selection { background-color: #352e7e; color: #fff; } /*** Mozilla based browsers ***/ ::-moz-selection { background-color: #352e7e; color: #fff; } /***For Other Browsers ***/ ::-o-selection { background-color: #352e7e; color: #fff; } ::-ms-selection { background-color: #352e7e; color: #fff; } /*** For Webkit ***/ ::-webkit-selection { background-color: #352e7e; color: #fff; } 

Je me rends compte que c’est une vieille question, mais pour quiconque la rencontre, cela peut être fait en utilisant un contenu modifiable, comme indiqué dans ce JSFiddle .

Bravo à Alex qui l’a mentionné dans les commentaires (je n’ai pas vu ça jusqu’à maintenant!)

Toutes les réponses sont correctes en ce qui concerne le pseudo-élément ::selection et son fonctionnement. Cependant, la question demande en fait spécifiquement comment l’utiliser sur les entrées de texte .

La seule façon de faire est d’appliquer la règle via un parent de l’entrée (n’importe quel parent):

 .parent ::-webkit-selection, [contenteditable]::-webkit-selection { background: #ffb7b7; } .parent ::-moz-selection, [contenteditable]::-moz-selection { background: #ffb7b7; } .parent ::selection, [contenteditable]::selection { background: #ffb7b7; } /* Aesthetics */ input, [contenteditable] { border:1px solid black; display:inline-block; width: 150px; height: 20px; line-height: 20px; padding: 3px; } 
  Content Editable 

Voici le frottement:

  :: selection {
       background: # ffb7b7;  / * Navigateurs WebKit / Blink / 
      } 
      :: - moz-selection { 
        background: # ffb7b7;  / Navigateurs Gecko * /
     } 

Dans le sélecteur de sélection, la couleur et l’arrière-plan sont les seules propriétés qui fonctionnent. Ce que vous pouvez faire pour améliorer votre style, c’est changer la couleur de sélection pour différents paragraphes ou différentes sections de la page.

Tout ce que j’ai fait était d’utiliser une couleur de sélection différente pour les paragraphes avec différentes classes:

  p.red::selection {
       background: # ffb7b7;
     }
     p.red::-moz-selection {
       background: # ffb7b7;
     }
     p.blue::selection {
       background: # a8d1ff;
     }
     p.blue::-moz-selection {
       background: # a8d1ff;
     }
     p.yellow :: selection {
       background: # fff2a8;
     }
     p.yellow :: - moz-selection {
       background: # fff2a8;
     } 

Notez que les sélecteurs ne sont pas combinés, même si> le bloc de style fait la même chose. Cela ne fonctionne pas si vous les combinez:

 
/* Combining like this WILL NOT WORK */ p.yellow::selection, p.yellow::-moz-selection { background: #fff2a8; }

C’est parce que les navigateurs ignorent tout le sélecteur s’il y en a une partie qu’ils ne comprennent pas ou qui est invalide. Il y a quelques exceptions à cela (IE 7?) Mais pas par rapport à ces sélecteurs.

DEMO

LIEN OFO L’INFO EST DE

Merci pour les liens, mais il semble que la mise en évidence du texte ne soit pas exposée.

En ce qui concerne le problème actuel, j’ai opté pour une approche différente en éliminant la nécessité d’une saisie de texte et en utilisant innerHTML avec du JavaScript. Non seulement il contourne la mise en évidence du texte, mais en fait, il semble beaucoup plus propre.

Cette granularité d’un ajustement à un contrôle de formulaire HTML n’est qu’un autre bon argument pour éliminer complètement les contrôles de formulaire. Haha!

@ Mike Eng,

En sélectionnant la couleur d’arrière-plan du texte, la couleur du texte peut être modifiée à l’aide de :: selection , notez que :: selection fonctionne en chrome, pour que cela fonctionne dans les navigateurs basés sur Firefox, essayez celui-ci :: – moz-selection

Essayez l’extrait de code suivant dans reset.css ou la page css où vous souhaitez appliquer l’effet.

 ::selection{ //Works only for the chrome browsers background-color: #CFCFCF; //This turns the background color to Gray color: #000; // This turns the selected font color to Black } ::-moz-selection{ //Works for the firefox based browsers background-color: #CFCFCF; //This turns the background color to Gray color: #000; // This turns the selected font color to Black } 

Le code ci-dessus fonctionnera même dans les zones de saisie.

Il semble que lorsque vous définissez la bordure à l’intérieur d’une déclaration de style de pseudo-élément focus, elle utilise celle-ci au lieu de la bordure bleue normale. En utilisant cela, vous pouvez définir un style qui est exactement le même que la bordure de l’élément.

 input:focus, textarea:focus { border:1px solid gray; } #textarea { position:absolute; top:10px; left:10px; right:10px; width:calc(100% - 20px); height:160px; display:inline-block; margin-top:-0.2em; } 
  

Essayez ce code pour utiliser:

 /* For Mozile Firefox Browser */ ::-moz-selection { background-color: #4CAF50; } /* For Other Browser*/ ::selection { background-color: #4CAF50; } 

Je suppose que cela peut aider:

styles de sélection

Il est possible de définir la couleur et l’arrière-plan du texte sélectionné par l’utilisateur.

Essayez-le ci-dessous. Si vous sélectionnez quelque chose et que cela ressemble à cela, votre navigateur prend en charge les styles de sélection.

C’est le paragraphe avec normal ::selection .

C’est le paragraphe avec ::-moz-selection .

C’est le paragraphe avec ::-webkit-selection .

Fiche de test:

 p.normal::selection { background:#cc0000; color:#fff; } p.moz::-moz-selection { background:#cc0000; color:#fff; } p.webkit::-webkit-selection { background:#cc0000; color:#fff; } 

Cité de Quirksmode