覆盖 google recaptcha css 以使其响应 [英] Overriding google recaptcha css to make it responsive
问题描述
我在一个网站(不是 Wordpress 网站或 Joomla)中安装了 Google Recaptcha 所以不提供任何 WP 插件或 Joomla 扩展 :)
我的问题是,该站点具有响应性,而 recaptcha 则没有.当我使用 Firebug 查找其样式时,我意识到不仅 Google 提供的库不包含 css 文件,而且我无法在我的 custom-styles.css 文件中覆盖它们,因为 Google 非常周到地应用了 !important
选择器破解了他们 css 中的所有内容,但我什至尝试对它进行分类,以便我可以破坏并希望覆盖 Google 的样式,但该插件不起作用:(
有什么想法吗?
附言我也没有使用不同的重新验证码.对不起.我敢肯定这里有一些 recaptcha 极客 ;)
这是 HTML.这是recaptcha.php 从服务器呈现的内容.这不是我在实际 PHP 页面中所拥有的......(没有 CSS,这是主要问题)
<div id="recaptcha_widget_div" style="" class="recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha"_theme><tr><td colspan="6" class="recaptcha_r1_c1"></td></tr><tr><td class="recaptcha_r2_c1"></td><td colspan="4" class="recaptcha_image_cell"><center><div id="recaptcha_image" style="width: 300px; height: 57px;"><img id="recaptcha_challenge_image" alt="reCAPTCHA 挑战图片" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-XY-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU></DIV></中心></td><td class="recaptcha_r2_c2"></td></tr><tr><td rowspan="6" class="recaptcha_r3_c1"></td><td colspan="4" class="recaptcha_r3_c2"></td><td rowspan="6" class="recaptcha_r3_c3"></td></tr><tr><td rowspan="3" class="recaptcha_r4_c1" height="49"><div class="recaptcha_input_area"><span id="recaptcha_challenge_field_holder" style="display: none;"><输入类型= 隐藏的" 名称= recaptcha_challenge_field" ID = recaptcha_challenge_field" 值= 03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-XY-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU" ></跨度><input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="输入文本" autocomplete="off" style="font-style: italic;"><span id="recaptcha_privacy" class="recaptcha_only_if_privacy"><a href="http://www.google.com/intl/en/policies/" target="_blank">隐私&术语</a></span></td><td rowspan="4" class="recaptcha_r4_c2"></td><td><a id="recaptcha_reload_btn" title="获得新挑战"><img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="获得新挑战></a></td><td rowspan="4" class="recaptcha_r4_c4"></td></tr><tr><td><a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="获取音频挑战"><img id="recaptcha_switch_audio" width="25" height="16" alt="获取音频挑战" src="http://www.google.com/recaptcha/api/img/red/audio.gif"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="获得视觉挑战"><img id="recaptcha_switch_img" width="25" height="16" alt="获得视觉挑战" src="http://www.google.com/recaptcha/api/img/red/text.gif"></a></td></tr><tr><td><a id="recaptcha_whatsthis_btn" title="帮助"><img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="帮助"></a></td></tr><tr><td class="recaptcha_r7_c1"></td><td class="recaptcha_r8_c1"></td></tr></tbody>
这是我在页面中所做的
require_once('recaptchalib.php');$publickey = "your_public_key";//你从注册页面得到了这个echo recaptcha_get_html($publickey);
这是我的问题
解决方案 更改了自动高度和媒体查询
@media only screen and (max-width : 480px) {#recaptcha_challenge_image{边距:0 !重要;宽度:100%!重要;高度:自动!重要;}#recaptcha_response_field{边距:0 !重要;宽度:100%!重要;高度:自动!重要;}.recaptchatable #recaptcha_image {边距:0 !重要;宽度:100%!重要;高度:自动!重要;}.recaptchatable .recaptcha_r1_c1,.recaptchatable .recaptcha_r3_c1,.recaptchatable .recaptcha_r3_c2,.recaptchatable .recaptcha_r7_c1,.recaptchatable .recaptcha_r8_c1,.recaptchatable .recaptcha_r3_c3,.recaptchatable .recaptcha_r2_c1,.recaptchatable .recaptcha_r4_c1,.recaptchatable .recaptcha_r4_c2,.recaptchatable .recaptcha_r4_c4,.recaptchatable .recaptcha_image_cell {边距:0 !重要;宽度:100%!重要;背景:无!重要;高度:自动!重要;}}
I installed Google Recaptcha in a site (not a Wordpress site or Joomla) So do not offer any WP plugins or Joomla Extension :)
My problem is, the site is responsive and recaptcha is not. When I use Firebug to find its styles I realized that not only the library that Google provides does not contain the css files, and I can't override them in my custom-styles.css file because Google, very thoughtfully, applied the !important
selector hack to EVERYTHING in their css, but I even tried classing it so that I can make a breach and hopefully override Google's styles but then the plugin doesn't work:(
Any ideas?
p.s. I am not using a different re-captcha either. Sorry. I'm sure there are some recaptcha geeks out here ;)
Here is the HTML. This is what the recaptcha.php renders from the server. THIS IS NOT WHAT i I HAVE IN THE ACTUAL PHP PAGE...(Don't have a CSS, and that is the main problem)
<div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha_theme_red">
<tbody>
<tr>
<td colspan="6" class="recaptcha_r1_c1"></td>
</tr>
<tr>
<td class="recaptcha_r2_c1"></td>
<td colspan="4" class="recaptcha_image_cell">
<center><div id="recaptcha_image" style="width: 300px; height: 57px;">
<img id="recaptcha_challenge_image" alt="reCAPTCHA challenge image" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></div>
</center>
</td>
<td class="recaptcha_r2_c2"></td>
</tr>
<tr>
<td rowspan="6" class="recaptcha_r3_c1"></td>
<td colspan="4" class="recaptcha_r3_c2"></td>
<td rowspan="6" class="recaptcha_r3_c3"></td>
</tr>
<tr>
<td rowspan="3" class="recaptcha_r4_c1" height="49">
<div class="recaptcha_input_area">
<span id="recaptcha_challenge_field_holder" style="display: none;">
<input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></span>
<input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="Type the text" autocomplete="off" style="font-style: italic;">
<span id="recaptcha_privacy" class="recaptcha_only_if_privacy"><a href="http://www.google.com/intl/en/policies/" target="_blank">Privacy & Terms</a></span>
</div>
</td>
<td rowspan="4" class="recaptcha_r4_c2"></td>
<td><a id="recaptcha_reload_btn" title="Get a new challenge">
<img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="Get a new challenge"></a></td>
<td rowspan="4" class="recaptcha_r4_c4"></td>
</tr>
<tr>
<td><a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge">
<img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="http://www.google.com/recaptcha/api/img/red/audio.gif"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge">
<img id="recaptcha_switch_img" width="25" height="16" alt="Get a visual challenge" src="http://www.google.com/recaptcha/api/img/red/text.gif"></a>
</td>
</tr>
<tr>
<td><a id="recaptcha_whatsthis_btn" title="Help">
<img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="Help"></a>
</td>
</tr>
<tr>
<td class="recaptcha_r7_c1"></td> <td class="recaptcha_r8_c1"></td>
</tr>
</tbody>
</table>
</div>
</div>
This is what I do have in the page
require_once('recaptchalib.php');
$publickey = "your_public_key"; // you got this from the signup page
echo recaptcha_get_html($publickey);
And here is my problem
解决方案 Changed auto height and media query
@media only screen and (max-width : 480px) {
#recaptcha_challenge_image{
margin: 0 !important;
width: 100% !important;
height: auto !important;
}
#recaptcha_response_field
{
margin: 0 !important;
width: 100% !important;
height: auto !important;
}
.recaptchatable #recaptcha_image {
margin: 0 !important;
width: 100% !important;
height: auto !important;
}
.recaptchatable .recaptcha_r1_c1,
.recaptchatable .recaptcha_r3_c1,
.recaptchatable .recaptcha_r3_c2,
.recaptchatable .recaptcha_r7_c1,
.recaptchatable .recaptcha_r8_c1,
.recaptchatable .recaptcha_r3_c3,
.recaptchatable .recaptcha_r2_c1,
.recaptchatable .recaptcha_r4_c1,
.recaptchatable .recaptcha_r4_c2,
.recaptchatable .recaptcha_r4_c4,
.recaptchatable .recaptcha_image_cell {
margin: 0 !important;
width: 100% !important;
background: none !important;
height: auto !important;
}
}
这篇关于覆盖 google recaptcha css 以使其响应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆