vacios - Cambiar el color de resaltado al seleccionar texto en una entrada de texto HTML

tamaño de input text css

Question

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

¿Hay alguna manera 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

@ Mike Eng,

Al seleccionar el color de fondo del texto, el color del texto puede cambiarse con la ayuda de :: selección , tenga en cuenta que :: la selección funciona en Chrome, para que funcione en los navegadores basados ​​en Firefox pruebe este :: - moz-selection

Pruebe el siguiente fragmento de código en reset.css o en la página css donde exactamente desea aplicar 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 también funcionará en los cuadros de entrada.

Answer 2

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.

Todo lo 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; } Tenga en cuenta que los selectores no están combinados, aunque el bloque de estilo está haciendo lo mismo. No funciona si los combinas:

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

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

DEMO

ENLACE DONDE SE ENCUENTRA LA INFORMACIÓN

Answer 3

Creo que esto puede ayudar:

estilos de selección

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

Pruébalo a continuación. 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 .

Hoja de prueba:

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

Gracias por los enlaces, pero parece que el texto resaltado no está expuesto.

En cuanto al problema real, terminé optando por un enfoque diferente al eliminar la necesidad de una entrada de texto y usar 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 5

Me doy cuenta de que esta es una vieja pregunta, pero para cualquiera que se encuentre con esto, esto se puede hacer usando contenteditable como se muestra en este JSFiddle .

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

Answer 6

Parece que cuando defines el borde dentro de una declaración de estilo de pseudo elemento de enfoque, usa eso en lugar del borde azul normal. Usando eso puedes definir un estilo que es exactamente el mismo que el borde del elemento.

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>

Aquí hay un estilo de borde modificado:

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>

Answer 7

Pruebe este código para usar:

/* For Mozile Firefox Browser */

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

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

Answer 8

Si estás buscando esto:

Aqui esta el link:

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

Answer 9

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

La única forma de hacerlo es aplicar la regla a través de uno de los padres de la entrada (cualquier padre para ese asunto):

.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>

Answer 10

este es el codigo

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