Changer la couleur de surbrillance lors de la sélection du texte dans une entrée de texte HTML

Question

J'ai cherché ce à travers le web et ne peut même trouver quelqu'un d'autre même demander cela, et encore moins une solution ...

est-il un moyen de changer la couleur de la zone de surbrillance dans une entrée de texte lorsque le texte est sélectionné? Pas la bordure en surbrillance ou l'arrière-plan, mais la partie qui apparaît autour du texte lorsque vous avez sélectionné le texte.

Answer 1

Merci pour les liens, mais il ne semble que si le texte actuel en soulignant que n'est pas exposé. En ce qui concerne le problème actuel, j'ai opté pour une approche différente en éliminant le besoin d'une saisie de texte et en utilisant innerHTML avec du JavaScript. Non seulement il contourne la mise en évidence du texte, mais il a l'air beaucoup plus propre.

Ce granular d'un tweak à un contrôle de formulaire HTML est juste un autre bon argument pour éliminer les contrôles de formulaire tout à fait. Haha!

Answer 2

Si vous recherchez ceci:

Voici le lien:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Answer 3

Je suppose que cela peut aider:

styles de sélection

Il est possible de définir la couleur et le fond du texte l'utilisateur sélectionne.

Essayez ci-dessous. Si vous sélectionnez quelque chose et qu'il ressemble à ceci, votre navigateur prend en charge les styles de sélection.

Ceci est le paragraphe avec normal ::selection.

Ceci est le paragraphe avec ::-moz-selection. Il s'agit du paragraphe avec ::-webkit-selection.

Testsheet:

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

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

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

Quoted de Quirksmode

Answer 4

Je sais que c'est une vieille question, mais pour tous ceux qui ne viennent à travers elle, cela peut être fait en utilisant contenteditable comme indiqué in this JSFiddle.

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

Answer 5

@ Mike Eng,

En sélectionnant la couleur de fond du texte, la couleur du texte peut être modifié à l'aide de :: sélection, notez que :: sélection œuvres en chrome, pour faire que travailler dans les navigateurs basés sur firefox essayer celui-ci :: - moz-selection

Essayez l'extrait de code suivant dans reset.css ou la page css où exactement vous voulez 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.

Answer 6

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; 
} 

Answer 7

Toutes les réponses ici sont correctes en ce qui concerne l'élément pseudo ::selection, et comment il fonctionne. Toutefois, la question ne demande en fait spécifiquement comment l'utiliser sur entrées de texte.

La seule façon de le faire est d'appliquer la règle par l'intermédiaire d'un parent de l'entrée (tout parent pour cette matière):

.parent ::-webkit-selection, [contenteditable]::-webkit-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::-moz-selection, [contenteditable]::-moz-selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
.parent ::selection, [contenteditable]::selection { 
 
\t background: #ffb7b7; 
 
} 
 

 
/* Aesthetics */ 
 
input, [contenteditable] { 
 
    border:1px solid black; 
 
    display:inline-block; 
 
    width: 150px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding: 3px; 
 
}

<span class="parent"><input type="text" value="Input" /></span> 
 
<span contenteditable>Content Editable</span>

Answer 8

Essayez ce code à utiliser:

/* For Mozile Firefox Browser */ 

::-moz-selection { background-color: #4CAF50; } 

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

Answer 9

est ici que le bât blesse:

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

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 une touche supplémentaire, c'est changer la couleur de sélection pour différents paragraphes ou différentes sections de la page.

Tout ce que je ne faisais utiliser différentes couleurs de sélection 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 comment les sélecteurs ne sont pas combinés, même si> le bloc de style fait la même chose. Il ne fonctionne pas si vous les combinez:

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

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

DEMO

LINK WHERE INFO IS FROM