Personaliza la selección de texto con el pseudo elemento selection de css

En éste pequeño artículo te enseñare cómo poder cambiar el aspecto de la selección de texto usando el pseudo elemento selection de css, así que sin más que decir, empecemos.

Instalar

Nos dirigiremos a nuestro panel y luego pincharemos en tema, posteriormente le daremos en el botón personalizar, dentro buscamos: Opciones avanzadas » agregar CSS y agregamos el siguiente código css:

usar sobre un contenedor especifico.

En caso de querer usar este pseudo elemento solo en un contenedor en concreto, este es el código que debes usar:

dónde my_class_or_id es una clase o id css que tu quieras.

personalizar

En el código use un color negro para el fondo y uno blanco para el texto, puedes cambiarlo y/o agregar otros reglas css si así lo prefieres, teniendo en cuenta que solo: color,background,background-color,text-shadow pueden ser utilizadas con este pseudo elemento.

ejemplo

La verdad, el artículo es tan simple que no veo necesario el tener que dar un ejemplo más en concreto o malgastar código en un ejemplo externo. Sí quieres ver que el pseudo elemento funciona, simplemente selecciona el texto de éste parrafo con tu ratón y mira que sucede. :)

compatibilidad de navegadores

puedes ver la compatibliidad de este pseudo elemento en caniuse.com para revisar que navegadores soportan esta regla de css.


bueno hasta aquí el artículo, si te ha gustado y/o tienes alguna pregunta, no dudes en dejar tu comentario. También, si puedes te invito a que compartas esta entrada en las redes sociales, eso me ayudaría mucho. Nos vemos en el próximo artículo, saludos.

Otros artículos que quizá te gusten.

cargando...

Comentarios

Publicar un comentario