¿Diseñar el color de selección de un tipo de entrada = texto, posible?

que tiene una entrada¿Diseñar el color de selección de un tipo de entrada = texto, posible?

<input type="text" id="myTest" value="bla bla bla"/>

y haciendo esto (usando jQuery)

$('#myTest').select();

causas "bla bla bla" para ser seleccionado por defecto con el color azul oscuro selección.

Ahora, ¿hay alguna manera de que pueda cambiar este color usando css? CSS3 puede cambiar la selección usando, por ejemplo

::-moz-selection { 
    background: #ffb7b7; 
}

pero esto sólo funciona en el texto de otros elementos, no en las entradas del HTML.

¿Alguna idea?

Fuente

2009-10-21 Tommy

Si encuentra algo, por favor, actualice esta pregunta abierta: http://stackoverflow.com/questions/2043695/textareaselection-and-moz-selection –

¿Qué hay de la creación de la mirada de la hoja de estilo y luego usar algo como:

<style> 

.selected-look{color:somehex, border:; font-family:; background:;} // etc; 

</style> 

$('#myTest').toggleClass('selected-look').select();

o $('#myTest').select().toggleClass('selected-look');

Fuente

2009-10-23 04:28:37 rydordy

No veo cómo esto afectará a la selección color de una selección en un campo de entrada (tipo = texto)? – Tommy

No creo que hay alguna manera de hacer esto . El color del texto seleccionado se decide a nivel de software/os y no es algo que realmente se pueda controlar con javascript. La página de API seleccionada http://api.jquery.com/select/ menciona varios complementos que le indicarán qué texto ha seleccionado el usuario. Lo único que se me ocurre intentar es cuando el usuario selecciona texto, quita el texto que ha seleccionado e inserta el mismo texto, marcado en un tramo que lo resaltará en un color diferente. Sin embargo, todavía verán el azul, ya que están poniendo de relieve ...

Fuente

2010-03-09 23:47:46 Finbarr

-1

Para mis entradas yo uso esto en mis archivos CSS:

input[type="text"] { /* css properties */}

el "texto" se pueden sustituir por "área de texto "," enviar "... incluso funciona con efectos de desplazamiento, ejemplo:

#area-restrita input[type='submit']:hover { background-color:#CCC; color:#FFF;}

Espero que pueda ayudar.

Fuente

2010-03-16 21:55:20 kevin

Me funciona si selecciona manualmente lo que desea.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Test</title> 
<style type="text/css"> 

p::-moz-selection, input::-moz-selection, textarea::-moz-selection { 
    color: red; 
    background-color: grey; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function() { 
    var message = document.getElementById('itext'); 
    // Select a portion of text 
    createSelection(message,3, 10); 

    // get the selected portion of text 
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd); 
}; 

function createSelection(field, start, end) { 
    if(field.createTextRange) { 
     var selRange = field.createTextRange(); 
     selRange.collapse(true); 
     selRange.moveStart('character', start); 
     selRange.moveEnd('character', end); 
     selRange.select(); 
    } else if(field.setSelectionRange) { 
     field.setSelectionRange(start, end); 
    } else if(field.selectionStart) { 
     field.selectionStart = start; 
     field.selectionEnd = end; 
    } 
    field.focus(); 
}  
</script> 
</head> 

<body> 
<p>This paragraph is selection-aware.</p> 
<form action="#"> 
<input type="text" id="itext" value="So is this input[text]" /> 
<textarea id="itextarea">And this textarea, as well</textarea> 
</form> 
</body> 
</html>

Probado en Firefox 4.0b6

No está funcionando con su función de jQuery jQuery porque es seleccionar el elemento <input />, en lugar de seleccionar el texto real. Pruebe algo como el script de arriba. Deberías verlo funcionando.

Fuente

2010-11-02 12:34:27 ssice

-1

Para mis entradas yo uso esto en mis archivos CSS:

input[type="text"] { /* cssproperties */ }

el "texto" puede sustituirse por "área de texto", "enviar" ... incluso trabaja con efectos de activación, ejemplo:

#area-restrita input[type='submit']:hover {background-color:#CCC; color:#FFF;}

Espero que te pueda ayudar.

Fuente

2011-03-15 00:59:00 Jon

Estoy bastante seguro de que esto no se puede hacer.Investigué esto hace un tiempo y terminé usando una etiqueta div en lugar de una entrada y la hice parecer un campo de entrada. Eso me permitió controlar y cambiar el color resaltado del texto seleccionado. Luego solo tuve la entrada como un campo oculto que se actualizó en consecuencia.

Probablemente esta no sea la respuesta que estabas buscando, pero así fue como pude solucionar el problema.

Fuente

2011-10-23 22:15:15 uadrive

Esto funciona, al menos en mi FF 7.0.1:

input::-moz-selection { 
    background-color: green; 
}

Fuente

2011-10-24 21:24:17 Lycha

funciona para mí en Firefox (versión más reciente), pero no funciona en Webkit. Aquí hay una prueba: http://jsfiddle.net/Gp8Rr/

Lo probé en las últimas versiones de Chrome, Safari y Firefox, y Firefox fue el único que funcionó. Tal vez un error, o tal vez Webkit no le permite diseñar esa parte de su UI?

Apenas una actualización aquí, para entrar en un poco más de detalle. ::selection es un pseudo-elemento no estándar, lo que significa que a pesar de que most browsers support it no tiene garantía de que continuarán haciéndolo, o de que los nuevos navegadores lo admitirán. Así que adelante y utilícelo, pero no lo haga esencial para la usabilidad de su sitio. Hay más sobre este tema en el MDN.

Fuente

2011-10-31 19:14:04

A partir de 2015, esto parece ser [compatible con muchos navegadores] (http://caniuse.com/#feat=css-selection) incluyendo IE9 +, Chrome, Safari, Firefox. Para las personas que pasan, diría que esta debería ser la respuesta aceptada. – aug

-1

¿Esto es lo que quieres? El texto se vuelve rojo después de ser seleccionado.

$("input").select(function(){ $("input").css("color","red"); });

Fuente

2011-11-01 16:52:22 RickjS

¿Diseñar el color de selección de un tipo de entrada = texto, posible?

Respuesta

Cuestiones relacionadas