Hay diseños web para los que se dedica mucho esfuerzo. Pero ese diseño queda muy bonito nada más cargar la página, pero se estropea ante acciones del usuario, como por ejemplo seleccionar un trozo de texto.
Imaginemos una página con colores básicos rojo, blanco y negro. Si nuestro navegador pone el texto seleccionado con fondo verde va a pegarse con los otros colores. Hay una pseudo-clase CSS que nos permite personalizar este comportamiento para cuidar todavía más el diseño.
Esta propiedad está soportada por la mayoría de navegadores con la misma sintaxis (IE9, Chrome, Opera, Safari) y por Firefox con prefijo. El código para hacer que un trozo de texto tenga el fondo de la selección en azul es:
#texto1::selection{ background: #00f; }#texto1::-moz-selection{ background:
#00f; }
#texto1::selection{
background: #00f;
}
#texto1::-moz-selection{
background: #00f;
}
Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula. Donec interdum, erat in ultricies faucibus, dolor enim feugiat ligula, sed facilisis mauris augue vel purus. Ut luctus sem a tortor accumsan egestas hendrerit turpis ornare. Proin nec velit cursus ligula commodo hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vulputate consequat euismod. Maecenas id posuere nulla. Praesent sit amet diam vel nisl lacinia adipiscing. Suspendisse scelerisque ligula sit amet neque auctor venenatis.
Se puede cambiar el color de fondo y el de la letra (hay que cuidar que se siga leyendo bien sobre el nuevo fondo), pero en mis pruebas no se puede cambiar nada más, como poner ejemplo poner negrita o cambiar tamaño de letra. Un segundo ejemplo con letra blanca y fondo rojo:
#texto2::selection{ background: #f00;
color: #fff; }#texto2::-moz-selection{ background:
#f00; color: #fff; }
#texto2::selection{
background: #f00;
color: #fff;
}
#texto2::-moz-selection{
background: #f00;
color: #fff;
}
Praesent quis nisl neque, sed mollis est. Donec et augue vel neque egestas eleifend quis nec diam. Nam et turpis ligula, sodales condimentum orci. Praesent malesuada nisi lacus, in placerat enim. Donec congue convallis diam, eget bibendum eros pellentesque ac. Aliquam elit ligula, elementum quis interdum sed, aliquet sed ligula. Donec interdum, erat in ultricies faucibus, dolor enim feugiat ligula, sed facilisis mauris augue vel purus. Ut luctus sem a tortor accumsan egestas hendrerit turpis ornare. Proin nec velit cursus ligula commodo hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vulputate consequat euismod. Maecenas id posuere nulla. Praesent sit amet diam vel nisl lacinia adipiscing. Suspendisse scelerisque ligula sit amet neque auctor venenatis.
Deja tu comentario