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