Cuando un usuario selecciona una palabra, una frase o cualquier fragmento de tu página web, el navegador aplica automáticamente unos colores que puedes cambiar fácilmente utilizando el pseudoelemento ::selection de CSS.
Aunque pueda parecer un detalle pequeño, personalizar el texto seleccionado te permite cuidar todavía más la apariencia de tu página y mantener los colores de selección alineados con tu identidad visual.
🎨 Con unas pocas líneas de CSS puedes modificar el color del texto, el color de fondo y algunas propiedades adicionales que aparecen cuando alguien selecciona contenido con el ratón o el teclado.
En este tutorial vas a aprender cómo utilizar ::selection, dónde colocar el código y varias formas de aplicarlo tanto globalmente como sobre elementos concretos.
Qué es ::selection en CSS
El pseudoelemento ::selection permite aplicar determinados estilos CSS al fragmento de contenido que un usuario tiene seleccionado en ese momento.
Normalmente, los navegadores muestran la selección utilizando un fondo azul acompañado de texto blanco o negro, aunque este comportamiento puede variar dependiendo del navegador y del sistema operativo.
Gracias a ::selection, puedes sustituir esos colores predeterminados por otros que encajen mejor con el diseño de tu página web.
Su sintaxis básica es extremadamente sencilla:
::selection {
background-color: #000000;
color: #ffffff;
}
Con este código, cualquier texto seleccionado tendrá un fondo negro y el contenido aparecerá en color blanco.
Puedes consultar también la documentación del pseudoelemento ::selection en MDN Web Docs si quieres profundizar en su funcionamiento.
Cómo cambiar el color del texto seleccionado
La forma más sencilla de personalizar una selección consiste en modificar únicamente sus propiedades background-color y color.
Por ejemplo, puedes utilizar este código:
::selection {
background-color: #ffcc00;
color: #222222;
}
En este caso, el usuario verá un fondo amarillo con un texto de color gris muy oscuro cada vez que seleccione cualquier fragmento de la página.
Para aplicarlo en tu web solamente tienes que seguir estos pasos:
- 🔧 Accede al lugar desde el que puedes añadir CSS personalizado a tu página web.
- 📋 Copia el código de
::selectionque quieras utilizar. - 🎨 Sustituye los valores de los colores por los correspondientes a tu paleta corporativa.
- 💾 Guarda los cambios realizados.
- 🖱️ Selecciona cualquier texto de la página para comprobar inmediatamente el resultado.
Si utilizas WordPress, puedes añadir este código mediante las opciones de CSS de tu tema, mediante un plugin específico o desde las herramientas disponibles en determinados constructores visuales.
Personalizar ::selection en toda la página
Si escribes directamente ::selection sin añadir ningún selector delante, el estilo se aplicará de forma global a toda la página.
::selection {
background: #673ab7;
color: #ffffff;
}
Esta suele ser la opción más recomendable cuando quieres mantener una selección uniforme en textos, títulos, listas y prácticamente cualquier otro contenido seleccionable.
💡 Utilizar uno de los colores principales de tu marca puede convertir un comportamiento genérico del navegador en un pequeño detalle de personalización visual.
Cambiar la selección solamente en determinados elementos
No tienes que utilizar necesariamente el mismo diseño de selección en toda tu web, ya que ::selection también puede combinarse con selectores CSS específicos.
Por ejemplo, puedes cambiar únicamente la selección de los párrafos:
p::selection {
background-color: #e91e63;
color: #ffffff;
}
Con esta regla, el estilo personalizado afectará solamente al texto contenido dentro de los párrafos.
También puedes utilizarlo sobre títulos:
h2::selection {
background-color: #222222;
color: #ffffff;
}
Esto te permite crear pequeñas diferencias visuales entre los distintos componentes de tu web sin modificar el estilo general del contenido.
Personalizar la selección de una clase concreta
Otra posibilidad interesante consiste en aplicar ::selection únicamente a los elementos que tengan una clase CSS determinada.
Imagina que tienes una caja destacada con esta clase:
<div class="destacado">
Este es un contenido destacado.
</div>
Puedes modificar exclusivamente la selección de ese contenido utilizando:
.destacado::selection {
background-color: #00bcd4;
color: #000000;
}
Esta técnica resulta especialmente útil cuando trabajas con bloques destacados, llamadas a la acción, avisos o secciones especiales que utilizan colores diferentes al resto de la página.
Cómo elegir buenos colores para ::selection
Aunque técnicamente puedes utilizar prácticamente cualquier combinación, no todos los colores ofrecen una buena experiencia de lectura.
👁️ Lo más importante es mantener suficiente contraste entre el color del fondo y el color del texto para que el contenido seleccionado continúe siendo perfectamente legible.
Por ejemplo, esta combinación funciona correctamente:
::selection {
background-color: #111111;
color: #ffffff;
}
En cambio, combinar un amarillo claro con texto blanco puede provocar una selección difícil de leer debido al bajo contraste existente entre ambos colores.
Puedes comprobar el contraste de tus combinaciones utilizando herramientas como el Contrast Checker de WebAIM.
Utilizar variables CSS con ::selection
Si tu página utiliza variables CSS, también puedes aprovecharlas para controlar los colores de la selección desde un único lugar.
:root {
--color-principal: #6200ee;
--color-seleccion-texto: #ffffff;
}
::selection {
background-color: var(--color-principal);
color: var(--color-seleccion-texto);
}
Esta solución facilita considerablemente el mantenimiento de páginas grandes porque puedes cambiar los colores globalmente modificando solamente las variables correspondientes.
Además, utilizar variables ayuda a mantener una mayor coherencia entre botones, enlaces, elementos destacados y el propio color de selección del contenido.
Añadir text-shadow al texto seleccionado
::selection admite un número relativamente reducido de propiedades CSS, pero también puedes experimentar con text-shadow para conseguir determinados efectos.
Por ejemplo:
::selection {
background-color: #000000;
color: #ffffff;
text-shadow: 1px 1px 2px #555555;
}
Sin embargo, conviene utilizar estos efectos con moderación porque una selección excesivamente decorada puede perjudicar la legibilidad del contenido.
Para la mayoría de páginas, una combinación sencilla de background-color y color ofrece el resultado más limpio y predecible.
Propiedades que puedes utilizar con ::selection
A diferencia de otros pseudoelementos, ::selection no está pensado para modificar completamente el aspecto de un elemento, sino solamente determinados aspectos relacionados con su representación durante la selección.
Por este motivo, propiedades como margin, padding, display, width o height no funcionan como podrías esperar.
Las propiedades relacionadas con el color y la apariencia del texto son las más apropiadas para trabajar con este pseudoelemento.
Puedes encontrar información técnica adicional sobre CSS en la especificación del W3C.
Tabla resumen de ::selection
| Objetivo | Código o propiedad | Resultado |
|---|---|---|
| Cambiar el fondo | background-color | Modifica el color que aparece detrás del texto seleccionado |
| Cambiar el texto | color | Modifica el color de las letras seleccionadas |
| Aplicarlo a toda la web | ::selection | Personaliza globalmente la selección |
| Aplicarlo a párrafos | p::selection | Modifica únicamente la selección de los párrafos |
| Aplicarlo a títulos | h1::selection, h2::selection | Personaliza solamente los encabezados |
| Aplicarlo a una clase | .clase::selection | Limita el efecto a determinados elementos |
| Utilizar colores globales | var() | Permite emplear variables CSS |
| Añadir efectos al texto | text-shadow | Puede incorporar una sombra al contenido seleccionado |
Ejemplos de ::selection que puedes utilizar
Si buscas un estilo elegante y minimalista, puedes probar esta combinación:
::selection {
background-color: #222222;
color: #ffffff;
}
Si prefieres una selección más llamativa, puedes utilizar:
::selection {
background-color: #ff5722;
color: #ffffff;
}
Para un diseño más suave puedes probar:
::selection {
background-color: #d7ccc8;
color: #212121;
}
🎯 Lo recomendable es elegir una combinación relacionada con los colores principales de tu página, pero asegurándote siempre de que el contenido siga siendo fácil de leer.
¿Es necesario utilizar ::-moz-selection?
Es posible que encuentres tutoriales antiguos en los que aparece una regla adicional denominada ::-moz-selection, utilizada históricamente para ofrecer compatibilidad con determinadas versiones de Firefox.
El código solía escribirse de esta manera:
::-moz-selection {
background-color: #000000;
color: #ffffff;
}
::selection {
background-color: #000000;
color: #ffffff;
}
En navegadores modernos, la versión estándar ::selection tiene una compatibilidad muy amplia, por lo que normalmente puedes utilizar directamente esta sintaxis sin necesidad de duplicar las reglas.
Errores habituales al utilizar ::selection
Uno de los errores más frecuentes consiste en elegir dos colores demasiado parecidos, haciendo que el texto seleccionado resulte difícil de distinguir.
Otro problema habitual consiste en intentar aplicar propiedades como bordes, márgenes o tamaños, esperando que ::selection funcione igual que otros pseudoelementos.
También conviene evitar diseños demasiado extravagantes, ya que el objetivo principal de una selección sigue siendo indicar claramente qué fragmento del contenido ha seleccionado el usuario.
✅ Una regla sencilla, contrastada y coherente con el diseño general de tu web suele ofrecer el mejor resultado.
Conclusión
Personalizar el texto seleccionado con ::selection en CSS es uno de esos pequeños ajustes que requieren apenas unas líneas de código pero pueden mejorar notablemente el acabado visual de una página.
Puedes utilizarlo globalmente, limitarlo a determinados elementos o combinarlo con clases y variables CSS para conseguir un control mucho más preciso.
🎨 Si quieres empezar por una opción sencilla, utiliza solamente background-color y color, elige dos tonos con buen contraste y adapta la combinación a la identidad visual de tu web.
