home
about
blog
music
tech
photos
art
photoshop
if you've ever used a service which used a captcha service such as reCaptcha or hCaptcha to curb spam you probably noticed they usually ask you to check a box labeled "i'm not a robot" or "i'm a human". needless to say in you are in fact a robot or not a human, this can be extremely othering and make you not want to use their services.
thankfully, it's possible to curb this exclusion with a bit of CSS:
for reCaptcha:
#recaptcha-anchor-label {
font-size: 0 !important;
line-height: 0 !important;
}
#recaptcha-anchor-label::before {
content: "I'm a robot";
font-size: 14px;
}
since reCaptcha neatly uses unique selector IDs, it's easy to write rules that selects them appropriately. however the same cannot be said for hCaptcha:
body > div#anchor > div.label-container > label-td > label-tc > div#label {
font-size: 0 !important;
line-height: 0 !important;
}
body > div#anchor > div.label-container > label-td > label-tc > div#label::before {
content: "I'm a robot";
font-size: 14px;
}
since hCaptcha does not use any descriptive selectors, we're forced to use the DOM hierarchy to make sure we're targeting the right thing to avoid false positives. this should work as the time of this post. you can also modify the content attributes in the CSS above to replace "I'm a robot" with any phrase of your choosing.
in order to use these you can simply drop these rules into a userContent.css file or by using the styling plugin of your choice in your browser. hope this helps, and happy web browsing!