Estoy haciendo mi sitio web y me encontré con un problema.
Estoy tratando de invertir colores en la selección de texto. Intenté esto, pero no funciona:
::selection { fiter: invert(); } ::selection { color: white; background-color: black; } .p1 { color: black; background-color: white; } .p2 { color: red; background-color: white; } .p3 { color: cyan; background-color: black; } <p class="p1">Paragraph 1</p> <p class="p2">Paragraph 2</p> <p class="p3">After select I want paragraph 2 to look like this:</p>¿Puedes ayudarme por favor?
No puedo ver cómo hacer esto en un caso complejo, donde la selección contiene varios elementos HTML que podrían estar configurando el color y el color de fondo individualmente (aunque, por supuesto, algunos análisis complejos de HTML/CSS deben poder hacer eso, pero no soy capaz ).
Sin embargo, podemos tratar con bastante sencillez el caso sencillo en el que el color y el color de fondo son consistentes en el div principal de la selección.
En un evento de selección, este fragmento lee el estilo calculado del elemento principal, calcula el inverso del color y el color de fondo y establece las variables CSS que se seleccionan y utilizan en el pseudoelemento de selección.
document.addEventListener('selectionchange', (e) => { function invert(color) { color = color.replace('rgb(', ''); color = color.replace(')', ''); color = color.replace('rgba(', ''); let colors = color.split(','); let r = colors[0].replace(' ', ''); let g = colors[1].replace(' ', ''); let b = colors[2].replace(' ', ''); let a = (colors.length > 3) ? colors[3].replace(' ', '') : 1; r = ~r & 255; g = ~g & 255; b = ~b & 255; return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'; } selection = window.getSelection(); if (selection.anchorNode) { const parent = selection.anchorNode.parentElement; const style = window.getComputedStyle(parent); parent.style.setProperty('--color', invert(style.color)); parent.style.setProperty('--background-color', invert(style.backgroundColor)); } }); .invertSelectionColors::selection { color: var(--color); background-color: var(--background-color); } <div class="invertSelectionColors" style="background-color: cyan;color:#000000;"> here is some text originally background color cyan and color #000000 </div> <div class="invertSelectionColors" style="background-color: rgba(255, 0, 0, 0.5);color:#0000ffff;"> here is some text originally background color rgba(255, 0, 0, 0.5) and color #0000ffff </div>Por ahora simplemente no puedes hacerlo con puro estilo. Tendrías que escribir código javascript para eso.
Solo se pueden usar ciertas propiedades CSS con ::selección:
color
color de fondo
decoración de texto y sus propiedades asociadas
sombra de texto
color de trazo, color de relleno y ancho de trazo
De la documentación de moz , pero supongo que se aplica a todos los navegadores.
"Los filtros se usan comúnmente para ajustar la representación de imágenes, fondos y bordes". Los filtros no se utilizan con ::selection .
Deberías usar:
::selection { color: red; background: yellow; } ::selection { color: red; background: yellow; } <p>Lorem ipsum</p>