Cambio del color de resaltado cuando se selecciona texto en una entrada de texto HTML

Question

He estado buscando esto en toda la web y ni siquiera puedo encontrar a nadie más ni siquiera preguntar esto, y mucho menos una solución ...

¿Hay una forma de cambiar el color del área resaltada dentro de una entrada de texto cuando se selecciona texto? No es el borde resaltado o el fondo, sino la parte que aparece alrededor del texto cuando tiene el texto realmente seleccionado.

Answer 1

Gracias por los enlaces, pero parece como si el texto real destacando solo no está expuesto

En cuanto a la cuestión actual, terminé optando por un enfoque diferente al eliminar la necesidad de una entrada de texto y el uso de innerHTML con algo de JavaScript. No solo se trata de resaltar el texto, sino que se ve mucho más limpio.

Este granular de un ajuste a un control de formulario HTML es simplemente otro buen argumento para eliminar por completo los controles de formulario. ¡Jaja!

Answer 2

Si usted está buscando para ello:

Aquí está el enlace:

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

Answer 3

supongo que esto puede ayudar:

estilos de selección

Es posible definir el color y el fondo para el texto que el usuario selecciona .

Pruébelo más abajo. Si selecciona algo y se ve así, su navegador admite estilos de selección.

Este es el párrafo con normal ::selection.

Este es el párrafo con ::-moz-selection.

Este es el párrafo con ::-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; 
} 

Citado de Quirksmode

Answer 4

Comprendo que esto es una cuestión de edad, sino para cualquier persona que venga a través de ella se puede hacer esto utilizando contenteditable como se muestra in this JSFiddle.

Felicitaciones a Alex que mencionó esto en los comentarios (¡No lo vi hasta ahora!)

Answer 5

@ Mike Eng,

Al seleccionar el color de fondo del texto, el color del texto se puede cambiar con la ayuda de :: selección, tenga en cuenta que la selección :: obras en cromo, que hacen que trabajo en buscadores basados ​​en firefox prueba este :: - moz-selection

Prueba el siguiente fragmento de código en reset.css o en la página de css donde deseas aplicar exactamente el efecto.

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

El código anterior funcionará incluso en los cuadros de entrada también.

Answer 6

este es el código.

/*** 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

Todas las respuestas aquí son correctas cuando se trata de la seudo elemento ::selection, y cómo funciona. Sin embargo, la pregunta de hecho pregunta específicamente cómo usarlo en entradas de texto.

La única manera de hacerlo es aplicar la regla a través de uno de los padres de la entrada (cualquier padre para el caso):

.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

Prueba este código para utilizar:

/* For Mozile Firefox Browser */ 

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

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

Answer 9

Aquí está el problema:

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

Dentro del selector de selección, el color y el fondo son las únicas propiedades que funcionan. Lo que puede hacer para obtener un toque extra, es cambiar el color de selección para diferentes párrafos o diferentes secciones de la página.

único que hice fue usar diferentes colores de selección para los párrafos con diferentes clases:

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

Nota cómo no se combinan los selectores, a pesar de que> el bloque de estilo es hacer la misma cosa. No funciona si se combinan:

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

Eso es porque los navegadores ignoran el selector de todo si hay una parte de ella que no entienden o no es válida. Hay algunas excepciones a esto (IE 7?) Pero no en relación con estos selectores.

DEMO

LINK WHERE INFO IS FROM