¿Cómo cambiar el color seleccionado de un texto en CSS?

Si tu sitio web contiene mucho texto, la gente querrá seleccionarlo para copiarlo o buscarlo en Google.
Cambiar el color de la selección de texto es una buena manera de mostrar que te preocupas por los detalles de tu sitio.

Hoy vamos a ver algunos consejos sencillos que pueden ayudarte a dar un aspecto diferente a tu texto seleccionado.

Navegadores donde puedes cambiar el texto seleccionado

El soporte de los navegadores para este selector es bastante amplio hoy en día. Es compatible con todas las últimas versiones de los navegadores más populares, e incluso Internet Explorer lo soporta en IE10, por lo que no deberías tener ninguna dificultad.

¿Donde añadir el css para cambiar el texto seleccionado en WordPress?

Añade los siguiente códigos en apariencia /personalizar / CSS adicional

Selectores para cambiar el texto seleccionado

El código “::selection” es un selector que permite aplicar reglas a las partes del documento que son resaltadas por el usuario.

¿Necesitas una página web?

Nosotros hacemos realidad la parte online desarrollando una página web que te diferencie de tu competencia, posicione dentro de tu sector y te de visibilidad frente a tu público potencial, a la gente que te necesita pero aún no te conoce.

Pide información

Cambiar el color de fondo utilizando este selector

p.blue::selection  {
background: #1B6DE0;
}

Simplemente tendrás que cambiar el color “#1B6DE0” por el color que quieras (Puedes elegir el color en esta página si no conoces este tipo el formato HEX)

Propiedades para cambiar el texto seleccionado en CSS

Hasta ahora, la única propiedad que puedes cambiar con este selector es el fondo, pero hay otras propiedades que puedes utilizar para que tu texto destaque. Puede cambiar el color del texto.

p.color::selection  {
color: #1B6DE0;
}

También puede añadir una sombra al texto.

p.shadow::selection  {
text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

En este ejemplo, hay una ligera sombra en el texto. Sin embargo, el uso del sombreado de texto por sí mismo puede ser confuso, ya que el cambio en el texto es demasiado pequeño, haciendo que parezca que el texto no está seleccionado. Por esta razón, esta propiedad debe utilizarse en combinación con otras propiedades.

Por supuesto, puede utilizar las tres propiedades juntas para dar a su página un impacto aún mayor.

p.all::selection {
  color: white;
  background: grey;
  text-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

Si necesitas presupuesto o tienes alguna duda puedes contactar conmigo en el siguiente formulario.