CSS3 – ¿Cómo estilo el texto seleccionado en textareas y entradas en Chrome?

EDITAR: Como @geca señaló en los comentarios, este es un error conocido de WebKit . ¡Esperemos que se solucione pronto!

El pseudo-elemento ::selection permite a uno darle estilo al texto seleccionado. Esto funciona como se esperaba pero no para las áreas de texto y las entradas en Google Chrome 15. (No estoy seguro de si se trata de un problema de webkit o Chrome porque no puedo usar Safari en Linux).

Aquí hay un jsfiddle que demuestra este problema: http://jsfiddle.net/J5N7K/2/ El texto seleccionado en el párrafo tiene el estilo que debería ser. El texto seleccionado en el área de texto y la entrada no. (Pero está en Firefox).

¿Estoy haciendo algo mal o simplemente no puedo diseñarlo en Chrome ahora mismo?

¿Es una

con contenteditable una opción? Las funciones solo un para la mayoría de las cosas.

Demostración: http://jsfiddle.net/ThinkingStiff/FcCgA/

HTML:

 

<p> Highlights just fine in Chrome!

<div contenteditable> Highlights just fine in Chrome!

CSS:

 textarea, input, p, div { width: 400px; } #div-textarea { -webkit-appearance: textarea; height: 32px; overflow: auto; resize: both; } ::selection { background-color: black; color: white; } 

Salida (Chrome):

enter image description here

Este es un error conocido de WebKit . Lo siento, no hay solución hasta el momento 🙂

Actualización: el error de WebKit se corrigió el 10/13/2014.

¿Hay alguna posibilidad de que en lugar de usar el pseudo-elemento CSS pueda usar algo de jQuery?

échale un vistazo a este http://jsfiddle.net/J5N7K/6/ .

si no comprende el jQuery no dude en preguntar al respecto.