web-dev-qa-db-fra.com

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

Je cherchais cela sur le Web et je ne peux même pas trouver quelqu'un d'autre qui le lui demande, encore moins une solution ...

Existe-t-il un moyen de changer la couleur de la zone de surbrillance dans une entrée de texte lorsque du 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 le texte sélectionné.

htmlcsstextinputhighlight
52
Eric

Merci pour les liens, mais il semble que le texte en surbrillance ne soit pas exposé.

En ce qui concerne le problème actuel, j’ai finalement 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 cela contourne-t-il le texte en surbrillance, mais en plus, il semble beaucoup plus net.

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

0
Eric

Si vous recherchez ceci:

alt text

Voici le lien:

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

43
Sarfraz

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

Je me rends compte que c’est une vieille question, mais pour tous ceux qui la rencontrent, ceci peut être fait en utilisant contenteditable comme indiqué dans ce JSFiddle .

Félicitations à Alex qui a mentionné cela dans les commentaires (je ne l'avais pas vu jusqu'à présent!)

20
jaypeagi

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

La seule façon de le 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;
}
<span class="parent"><input type="text" value="Input" /></span>
<span contenteditable>Content Editable</span>

8
pilau

Voici le frotter:

     :: sélection {
 arrière-plan: # ffb7b7;/* WebKit/Navigateurs Blink /
 } 
 :: - moz-selection {
 arrière-plan: # 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 plus de talent est de changer la couleur de sélection pour différents paragraphes ou différentes sections de la page.

Tout ce que je faisais était d'utiliser une couleur de sélection différente pour les paragraphes de classes différentes:

     p.red::selection {
 arrière-plan: # ffb7b7; 
 } 
 p.red::moz-selection {
 arrière-plan: # ffb7b7; 
 } 
 p.blue::selection {
 background: # a8d1ff; 
 } 
 p.blue::-moz-selection {
 background: # a8d1ff; 
 } 
 p.yellow :: selection {
 arrière-plan: # fff2a8; 
 } 
 p.yellow :: - moz-selection {
 arrière-plan: # 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:

<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 est invalide. Il existe quelques exceptions à cela (IE 7?), Mais pas par rapport à ces sélecteurs.

DEMO

LIEN O INFO IS DE

2
user8529958

@ Mike Eng,

Lorsque vous sélectionnez la couleur de fond du texte, vous pouvez changer la couleur du texte à 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. 

0
Channaveer Hakari

Il semble que lorsque vous définissez la bordure à l'intérieur d'une déclaration de style de pseudo-élément de focus, elle l'utilise au lieu de la bordure bleue normale. En utilisant cela, vous pouvez définir un style exactement identique à 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;
}
<textarea id="textarea">yo</textarea>

Voici un style de bordure modifié: 

input:focus, textarea:focus {
    border:2px dotted red;
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}
<textarea id="textarea">yo</textarea>

0
1.21 gigawatts