Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Como cambiar el color del texto seleccionado con CSS</title> </head> <body> <style> body { font-family: sans-serif; font-size: 16px; line-height: 1.5; background: #eee; } h1 { font-size: 2em; margin-bottom: .5em; } p { margin-bottom: 1em; } #wrap { width: 80%; margin: 1em auto; padding: 1em 5%; background: #fff; } .red-pink::selection { background: red; color: pink; } .green-black-shadow::selection { background: green; color: black; text-shadow: 1px 1px #fff; } .red-pink::-moz-selection { background: red; color: pink; } .green-black-shadow::-moz-selection { background: green; color: black; text-shadow: 1px 1px #fff; } </style> <div id="wrap"> <div class="inner"> <h1>Ejemplo de uso de <code>::selection</code></h1> <p class="red-pink">El texto seleccionado en este párrafo se verá con fondo rojo y texto rosa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p> <p class="green-black-shadow">El texto seleccionado en este párrafo se verá con fondo verde, texto en negro y texto sombreado. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </body> </html>