9

¿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)?

4
  • 1
    También me lo he preguntado algunas veces XD Commented el 3 may. 2018 a las 15:08
  • 2
    La 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.
    – user7176
    Commented 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 Limon
    Commented el 9 may. 2018 a las 14:27
  • 3
    Hola @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
    – lois6b
    Commented el 9 may. 2018 a las 14:45

3 respuestas 3

11

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

2
  • 1
    wow, es un recurso estético muy bueno... Commented el 3 may. 2018 a las 15:15
  • 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.
    – rencinas
    Commented el 3 may. 2018 a las 15:52
6

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...

3
  • 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!
    – rhssr
    Commented el 3 may. 2018 a las 17:21
  • ¿A qué te refieres? el código que anexé en mi respuesta funciona correctamente
    – Rico
    Commented 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.
    – rhssr
    Commented el 3 may. 2018 a las 17:43
4

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!

0

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.