+34 949 490 283info@ayuve.netC/ Juan Bautista Topete, 8. 1ª Planta. Oficina 1. 19001. Guadalajara

Tutorial: Cómo eliminar el icono badge de Google Recaptcha en tu web

abril 13, 2020 2 Comentarios

Cuando montamos una web y queremos que por ejemplo en WordPress no nos lleguen emails de spam a través de formularios recurrimos a Google ReCAPTCHA. Este servicio de Captcha de la famosa empresa americana, en su versión 3 incluye una banderita o badge en la parte inferior derecha de la web que aparece siempre en las páginas donde hay formularios de contacto.

Pues si lo que deseas es eliminar esa banderita o icono para que no entorpezca otros elementos que puedas tener en una parte inferior derecha como una ventana flotante de contacto… te decimos aquí cómo eliminarlo.

Simplemente tienes que añadir el siguiente código a tu CSS. Si usas código fuente tendrás que irte a tu editor tipo ATOM y añadirlo y si usas algún constructor visual deberás irte a la zona de configuración y añadir el código CSS siguiente donde te lo permita:

.grecaptcha-badge { visibility: hidden; }

En el caso de que con ese código no te sirva deberás añadir el !important al final:

.grecaptcha-badge { visibility: hidden !important; }

Con ese código añadido a tu CSS conseguirás ocultar el «badge» o icono de Google ReCAPTCHA lo que hará que no te obstaculice en el diseño de otros elementos que puedas implementar en una parte bastante útil hoy en día como es la parte inferior de las webs donde cuando navegamos con el móvil podemos posicionar barras sociales o elementos de comunicación con el cliente.

¿Te ha gustado el truco CSS? ¿Lo conocías?

Déjanos tu comentario un poco más abajo.

 

OTROS TUTORIALES

 

Post relacionados

A otros lectores/as les gustó:  Tutorial: Cómo enlazar a un número con WhatsApp desde una web

Comentarios (2)

  1. José 9 marzo, 2021

    Hola,

    A mí no me funciona.

    Tampoco con este código: .grecaptcha-badge {opacity:0}

    Sabes cuál puede ser la causa? Hubo algún cambio por parte de Google? (No he encontrado info al respecto)

    Gracias.

    • Ayuve 18 marzo, 2021

      Buenas José, ¿has probado con el código que viene más arriba? Utiliza el atributo visibility con hidden y seguro que te funciona.

Deja una respuesta