¿Qué debo hacer para que cuando un usuario seleccione un texto de mi página, salga de otro color en vez del color normal (azul y las letras blancas)?
-
1También me lo he preguntado algunas veces XD– Jorge Luis AlcantaraCommented el 3 may. 2018 a las 15:08
-
2La pregunta es interesante pero la forma de plantearla es un poco pobre. Estaría bien que la editaras añadiendo algo de contexto, un poco de código donde aplicar el efecto que buscas y qué mostraras que has intentado o investigado al respecto.– user7176Commented el 4 may. 2018 a las 8:02
-
1@lois6b, no me parece que la pregunta amerite ser cerrada, aunque agregara código de cualquier forma no sería relevante. La pregunta es concreta y va al punto a pesar de ser un tema sencillo.– Rene LimonCommented el 9 may. 2018 a las 14:27
-
3Hola @ReneLimon. Si, es concreta y directa pero considero que aunque sencilla, ha de mostrar investigacion, intento y errores/problemas asi como un ejemplo de lo que pretende conseguir. El problema ahora es que el autor ya consiguió puntos y respuestas válidas y no consigue nada mejorando la pregunta, lo cual le llevaría muy poco tiempo. Un saludo– lois6bCommented el 9 may. 2018 a las 14:45
Añade un comentario
|
3 respuestas
Bienvenido a StackOverflow en español
Aquí te dejo un sencillo ejemplo
p.red::selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.letras::selection {
color: #ffb7b7;
}
<html>
<head/>
<body>
<p class = "red"> Texto seleccionable en rojo </p>
<p class = "blue"> Texto seleccionable en azul </p>
<p class = "yellow"> Texto seleccionable en amarillo </p>
<p class = "letras"> Letras cambiando de color </p>
</body>
</html>
Fuente : css-tricks
-
1
-
1@the-breaker hace menos de un año lo use en una web que era toda en blanco y negro y al cliente no le gustaba que cuando se seleccionara el texto saliera ese: (palabras textuales) "Horrible y anticuado colo azul" Nos pegamos un rato hasta que encontramos esta maravilla.– rencinasCommented el 3 may. 2018 a las 15:52
Puedes hacer uso del selector de css ::selection
Por ejemplo...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style>
p::selection{
color:red;
background-color:black;
}
</style>
</head>
<body>
<p>Esto es un ejemplo de seleccion de texto</p>
</body>
</html>
Te dejo el Enlace del selector...
-
Yo tambien me equivoque en algunas partes! Pero ya arregle el codigo y funciona completamente bien, si quieres puedes usarlo cuando alguna otra persona pregunte esto!– rhssrCommented el 3 may. 2018 a las 17:21
-
¿A qué te refieres? el código que anexé en mi respuesta funciona correctamente– RicoCommented el 3 may. 2018 a las 17:40
-
Acabo de editar tu codigo y ya sirve, pero antes no servia (por lo menos a mi no me sirvio) y te lo puedo asegurar ya que cuando le daba a ejecutar me salia la selección de texto normal que vendria a ser azul y la letra blanca.– rhssrCommented el 3 may. 2018 a las 17:43
Para cambiar el color del fondo y color del texto seleccionado podemos hacerlo mediante CSS3
con el selector ::selection
que además admite estas propiedades:
color
: para el color de fuente del texto seleccionado.background-color
: para el color de fondo del texto seleccionado.text-shadow
: para establecer un efecto de sombreado del texto
seleccionado.
El siguiente ejemplo muestra el texto seleccionado rojo con el fondo de la selección en amarillo.
p::selection {
background: yellow;
color: red;
text-shadow: 1px 1px #fff;
}
<html>
<body>
<p> Hola mundo! Texto rojo con fondo amarillo al ser seleccionado </p>
</body>
</html>
Espero que te sirva!