¿El color azul restante en :: selección?

Question

Se supone que el selector de elemento CSS ::selection { } reemplaza la selección predeterminada de texto de color azul con nuestra propia opción de texto y color de fondo.

Sin embargo, esto no siempre parece ser el caso, ya que a menudo veo sitios web que tienen el color azul restante. No se reemplaza por completo con nuestra elección de color.

====== ====== EDITAR

supongo que es más fácil ver por nuestros propios ojos en lugar de a través de pantalla.

Ver esta página, por ejemplo: bleachindonesia.com/2012/05/27/bleach-day

En esa página, si se intenta seleccionar todo (Ctrl + A), que se vería el texto será bloqueada/seleccionada con el color gris. Sí, porque la página CSS emplea ::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; }.

Sin embargo, como puede ver con la siguiente captura de pantalla, deja una selección predeterminada de color azul en alguna parte.

http://i.stack.imgur.com/A0aUJ.png

cuenta de la diferencia de color, y al mismo tiempo, la parte no seleccionada. Hay algunas partes en el sitio que se seleccionan con la selección :: de color azul predeterminada, pero al mismo tiempo también hay otras partes que no se seleccionan.

---

Mientras tanto, también existe esta página: 24ways.org/2005/swooshy-curly-quotes-without-images

Una vez más, tratar de seleccionar todo (Ctrl + A) la página. Podrías ver que toda la selección es perfectamente de color granate. No hay una selección por defecto de color azul. Solo hay partes que no se seleccionan, pero no existe la selección predeterminada de color azul. Según lo representado por la siguiente captura de pantalla:

http://i.stack.imgur.com/4o6ll.png

La página de CSS? ::selection { background-color: rgba(179, 45, 71, .75); color: #fff; }. La única diferencia con la primera página es que usa RGBA y no código hexadecimal. No creo que haga ninguna diferencia allí, es esencialmente el mismo código.

Ahora lo que me hace preguntarme.

¿Por qué en la primera página persiste la selección predeterminada de color azul, pero no persiste en la segunda página? Y, ¿cómo hacerlo tan perfecto como la segunda página?

Answer 1

Francamente, es muy difícil decir si se trata de un comportamiento defectuoso, aunque supongo que se parece mucho a eso. ::selection padece una falta de definición adecuada (y por lo tanto una falta de implementación y pruebas adecuadas), así que apuesto a que incluso los proveedores de navegadores han tenido problemas para averiguar qué sucede.

pena mencionar es que esta regla, desde el primer sitio:

::selection, ::-moz-selection { background:#59574b;color:#fdfcf5; } 

parece mucho benigna, excepto que combina de forma incorrecta y ::selection::-moz-selection tal que nunca funcionará en Firefox, ya que no reconoce ::selection y drops the whole rule. 24ways.org tampoco muestra el color de selección correctamente en Firefox, no debido a los selectores combinados, sino porque no hay selector ::-moz-selection en primer lugar.

En cuanto a por qué Chrome y Safari dejan áreas azules de realce en ciertas áreas en el primer sitio, realmente no lo sé. Sin embargo, creo que Jared Farrish makes a good point:

Esto reproduce el problema en Chrome (por lo menos): jsfiddle.net/RfPgt Parece ser cuando un elemento está anidado dentro de otro elemento que sí tiene elementos seleccionables.

Answer 2

Leí esta pregunta hace algún tiempo para encontrar una solución para el mismo problema pero no lo encontré. Ahora, incluso si la pregunta es vieja, quiero compartir la solución que encontré.

sólo tiene que utilizar el selector universal

*::selection { background:red; } 

Answer 3

me encontré con lo que está causando esto. Es <br> así que si tiene <br> en su texto intente borrarlo