Tener una entrada
<input type="text" id="myTest" value="bla bla bla"/>
y haciendo esto (usando jQuery)
$('#myTest').select();
hace que se seleccione “bla bla bla” con el color de selección azul oscuro predeterminado.
Ahora, ¿hay alguna forma de que pueda cambiar este color usando css? css3 puede cambiar la selección usando, por ejemplo
::-moz-selection {
background: #ffb7b7;
}
pero esto solo funciona en texto en otros elementos, no en entradas html.
¿Algunas ideas?
/T
timoteo molinero
Me funciona en Firefox (última versión) 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 interfaz de usuario?
solo un actualizar aquí, para entrar en un poco más de detalle. ::selection es un pseudo-elemento no estándar, lo que significa que aunque la mayoría de los navegadores lo admiten no tiene garantía de que continúen haciéndolo, o que los nuevos navegadores lo admitan. Así que adelante, utilícelo, pero no lo haga esencial para la usabilidad de su sitio. Hay más sobre este tema en el MDN.
-
A partir de 2015, esto parece ser soportado en muchos navegadores incluyendo IE9+, Chrome, Safari, Firefox. Para las personas que pasan, diría que esta debería ser la respuesta aceptada.
– ago
29 de enero de 2015 a las 0:09
No creo que haya ninguna manera de hacer esto. El color del texto seleccionado se decide a nivel de software/so y no es algo que realmente pueda controlar con javascript. La página de selección de API http://api.jquery.com/select/ menciona varios complementos que le dirán qué texto ha seleccionado el usuario. Lo único que puedo pensar en intentar es cuando el usuario selecciona algún texto, elimina el texto que ha seleccionado e inserta el mismo texto, marcado en un lapso que lo resaltará en un color diferente. Sin embargo, seguirán viendo el azul mientras resaltan…
A mí me funciona si seleccionas lo que quieres manualmente.
<!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 funciona con su función jQuery porque jQuery está seleccionando su <input /> elemento, en lugar de seleccionar el texto real. Pruebe algo como el script anterior. Deberías verlo funcionando.
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 e hice que pareciera 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 estaba buscando, pero así fue como pude solucionar el problema.
Esto funciona al menos en mi FF 7.0.1:
input::-moz-selection {
background-color: green;
}
Kyle
¿Qué tal configurar el aspecto en 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');
kevin
Para mis entradas, uso esto en mis archivos css:
input[type="text"] { /* css properties */ }
el “texto” se puede reemplazar con “á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.
Si encuentra algo, actualice esta pregunta abierta: stackoverflow.com/questions/2043695/…
– Peka
9 de marzo de 2010 a las 23:51