覆盖 google recaptcha css 以使其响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22991938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding google recaptcha css to make it responsive
提问by LOTUSMS
I installed Google Recaptcha in a site (not a Wordpress site or Joomla) So do not offer any WP plugins or Joomla Extension :)
我在一个站点（不是 Wordpress 站点或 Joomla）中安装了Google Recaptcha所以不要提供任何 WP 插件或 Joomla 扩展 :)
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 !importantselector 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:(
我的问题是，该网站是响应式的，而 recaptcha 则不是。当我使用 Firebug 查找其样式时，我意识到不仅 Google 提供的库不包含 css 文件，而且我无法在我的 custom-styles.css 文件中覆盖它们，因为 Google 非常周到地应用了!important选择器 hack到他们 css 中的所有内容，但我什至尝试对它进行分类，以便我可以突破并希望覆盖 Google 的样式，但是该插件不起作用:(
Any ideas?
有任何想法吗？
p.s. I am not using a different re-captcha either. Sorry. I'm sure there are some recaptcha geeks out here ;)
ps我也没有使用不同的重新验证码。对不起。我敢肯定这里有一些 recaptcha 极客;)
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)
这是 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_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
这是我的问题
回答by Jan
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;
}
}
回答by LOTUSMS
For reCAPTCHA (requires jQuery):
对于 reCAPTCHA（需要 jQuery）：
$(function(){
function rescaleCaptcha(){
var width = $('.g-recaptcha').parent().width();
var scale;
if (width < 302) {
scale = width / 302;
} else{
scale = 1.0;
}
$('.g-recaptcha').css('transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
$('.g-recaptcha').css('transform-origin', '0 0');
$('.g-recaptcha').css('-webkit-transform-origin', '0 0');
}
rescaleCaptcha();
$( window ).resize(function() { rescaleCaptcha(); });
});
This basically checks your browser width and depends the scale it should be transformed too. Best solution around at this point.
这基本上会检查您的浏览器宽度并取决于它应该转换的比例。此时最好的解决方案。
Screenshots result (full width, smaller width, smallest width):
截图结果（全宽、小宽、最小宽）：
回答by Marc B
Google has complete documentation on how to style recaptcha forms here:
Google 在此处提供了有关如何设置 recaptcha 表单样式的完整文档：
https://developers.google.com/recaptcha/docs/display
https://developers.google.com/recaptcha/docs/display
and you can completely override the html/css they provide with your own.
并且您可以完全覆盖他们提供的 html/css。
回答by Siraj Khan
You may want to add some CSS styling but we opted for removing everything that wasn't necessary.
您可能想要添加一些 CSS 样式，但我们选择删除所有不必要的内容。
Add this code to your css file :
将此代码添加到您的 css 文件中：
@media (min-width: 320px) and (max-width: 480px) {
#recaptcha_challenge_image{
margin: 0 !important;
width: 100% !important;
}
#recaptcha_response_field
{
margin: 0 !important;
width: 100% !important;
}
.recaptchatable #recaptcha_image {
margin: 0 !important;
width: 100% !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;
}
}
回答by Hardik
回答by A. Bar
The best way is that you use the google recaptcha and use this css code to make responsive,
最好的方法是你使用google recaptcha并使用这个css代码来做出响应，
#rc-imageselect, .g-recaptcha {
display: inline; //the most important
}
#rc-imageselect{
max-width: 100%;
}
.g-recaptcha>div>div{
width: 100% !important;
height: 78px;
transform:scale(0.77); //the code to rescale the captcha obtained in this page
webkit-transform:scale(0.77);
text-align: center;
position: relative;
}
回答by Nelly Sattari
You can simply add some transform style for the specific device you needed:
您可以简单地为您需要的特定设备添加一些转换样式：
@media only screen and (max-width : 767px) {
#rc-imageselect, .g-recaptcha {
transform: scale(0.77);
-webkit-transform: scale(0.77);
transform-origin: 0 0;
-webkit-transform-origin: 0 0; }
}
回答by Bréndal Teixeira
In my case I decreased the scale of it and I force some horizontal alignment on centerthrough Bootstrap 4grid system. Click hereto see the result.
在我的情况下，我减小了它的比例，并通过Bootstrap 4网格系统强制在中心进行一些水平对齐。 单击此处查看结果。
Code:
代码：
<div class="row justify-content-center">
<div class="col g-recaptcha" data-sitekey="check_reCaptcha_doc_to_set_this" style="width: 304px !important; max-width: 304px !important; -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); margin: 0px; padding: 0px;">
</div>
</div>
回答by chickens
This is my solution with media queries. I use scale to scale it down to a reasonable size for mobile.
这是我的媒体查询解决方案。我使用 scale 将其缩小到适合移动设备的合理大小。
A simple and effective solution:
一个简单有效的解决方案：
@media (max-width:575px) {
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
margin-bottom: -20px;
}
}
回答by Manthan Patel
Simple you have to copy style attribute from below code to your code then your problem will solved.
很简单，您必须将样式属性从下面的代码复制到您的代码中，然后您的问题就会解决。
<div class="g-recaptcha" data-theme="light" data-sitekey="XXXXXXXXXXXXX"
style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-
webkit-transform-origin:0 0;"></div>
For more details open this Link
有关更多详细信息，请打开此链接
