1

I want to hide badge of google recaptcha. If I inspect element, it looks like this :

enter image description here

I try like this :

<style scoped>
   .grecaptcha-badge {
        display: none !important;
    }
</style>

But it does not works

If I try like this : 

<style>
   .grecaptcha-badge {
        display: none !important;
    }
</style>

It works

But for this case, I have to use scope because I only want to hide the badge of recaptcha on certain pages

How can I solve this problem?

moses toh
  • 12,344
  • 71
  • 243
  • 443
  • It looks like `scoped` is [nonstandard and generally unsupported](https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped), that's quite unfortunate. You could use Javascript to dynamically determine whether you're on one of the pages you want to hide it on, or change those pages such that they have a selector that you can use in combination with `.grecaptcha-badge` – CertainPerformance Apr 12 '20 at 01:06
  • I've had this problem before. The only way I could fix it was to scope it myself by adding a unique `id` or `class` to the components root node and use it in the ` – twharmon Apr 12 '20 at 01:08
  • @twharmon I try `body >>> .grecaptcha-badge { display: none !important; }`. But it does not works. It usually make unique id – moses toh Apr 12 '20 at 01:10
  • If like this : ``, it works. But it will hide badge recaptcha on all page – moses toh Apr 12 '20 at 01:11

0 Answers0