Taming the reCAPTCHA

5th August 2014  -  by Alex Bimpson  -  0 Comments

Google's reCAPTCHA is a brilliant free tool for stopping spam on your website, whilst simultaneously helping to digitise archived printed literature.

However, as you may have noticed, it doesn't scale down too well onto small mobile devices. Ok, it comes in at about 320px wide, so it will fit on screen as long as you don't have any padding around it. Of course, every single mobile site I build and use tends to have at least 10px of padding around the edges, meaning that the reCAPTCHA form suddenly becomes a little too wide and starts screwing up my layouts.

Now, if you want to you can go ahead and use the API to build your own reCAPTCHA pretty much from scratch, but I just wanted to keep things simple and modify the default plugin ever so slightly with a bit of CSS. Turns out that's not quite so simple to do after all, but I got there in the end...

/* NEW WRAPPER */
#recaptcha{
	background:#830300;
	padding:0 0 4px;
	border-radius:4px;
}
/* OVERALL WIDTH */
#recaptcha,
#recaptcha #recaptcha_area,
#recaptcha #recaptcha_table{
	width:290px !important;
}
/* HIDE THE LAST TABLE ROW - IT CAUSED A FEW ISSUES */
#recaptcha tr:nth-child(7),
.recaptchatable .recaptcha_r7_c1,
.recaptchatable .recaptcha_r8_c1{
	display:none;
}
/* REMOVE BACKGROUND FRAMES */
.recaptchatable .recaptcha_r1_c1,
.recaptchatable .recaptcha_r2_c1,
.recaptchatable .recaptcha_r2_c2,
.recaptchatable .recaptcha_r3_c1,
.recaptchatable .recaptcha_r3_c2,
.recaptchatable .recaptcha_r3_c3,
.recaptchatable .recaptcha_r4_c2,
.recaptchatable .recaptcha_image_cell{
	background:none !important;
}
/* STYLE THE IMAGE BOX */
.recaptchatable #recaptcha_image,
.recaptchatable #recaptcha_image img{
	width:278px !important;
	height:53px !important;
	border-radius:3px;
	background:#FFF;
}
.recaptchatable #recaptcha_image{
	padding:2px !important;
}
/* STYLE THE YELLOW INPUT BOX */
.recaptchatable .recaptcha_r4_c1{
	background:#ffdc73 !important;
	border-radius:3px;
}
/* HEIGHT - ROW 1 (top padding) */
.recaptchatable .recaptcha_r1_c1{
	height:4px !important;
}
/* HEIGHT - ROW 2 (image - auto height) */
.recaptchatable .recaptcha_r2_c1,
.recaptchatable .recaptcha_r2_c2,
.recaptchatable .recaptcha_image_cell center,
.recaptchatable .recaptcha_image_cell{
	height:auto !important;
}
/* HEIGHT - ROW 3 (spacing between image and input) */
.recaptchatable .recaptcha_r3_c2{
	height:4px !important;
}
/* HEIGHT - ROW 4 (input area) */
.recaptchatable .recaptcha_r3_c1,
.recaptchatable .recaptcha_r3_c3,
.recaptchatable .recaptcha_r4_c1,
.recaptchatable .recaptcha_r4_c2,
.recaptchatable .recaptcha_r4_c4{
	height:49px !important;
}
/* WIDTH - LEFT & RIGHT (side padding) */
.recaptchatable .recaptcha_r2_c1,
.recaptchatable .recaptcha_r2_c2,
.recaptchatable .recaptcha_r3_c1,
.recaptchatable .recaptcha_r3_c3,
.recaptchatable .recaptcha_r4_c2{
	width:4px !important;
}
/* WIDTH - CENTER (overall width, minus side padding) */
.recaptchatable .recaptcha_r3_c2{
	width:282px !important;
}
/* WIDTH - YELLOW INPUT AREA */
.recaptchatable .recaptcha_r4_c1{
	width:171px !important;
}
/* WIDTH - RECAPTCHA LOGO */
.recaptchatable .recaptcha_r4_c4{
	width:82px !important;
}

There's a lot going on here, but essentially I've wrapped the reCAPTCHA in a new div with an id of recaptcha, and amended the width and height of various table cells to resize the whole thing down to a more compact 290px.

Hopefully this might help a few people in the same situation as me. You can simply drop this CSS into your own site, or modify some of the dimensions etc to restyle it the way you want. As always, code is in the resource library.

by Alex Bimpson

Web designer and developer, and founder of Prrple. Works at Kerve, and studied Architecture at the University of Bath.

Comments

Keep Up To Date

Want to ensure you always catch our latest posts? You can follow us on Twitter, like us on Facebook, and even subscribe to a good old fashioned RSS feed. Just click the relevant links below to make sure you never miss a thing.