覆盖google recaptcha css以使其响应
我在网站（不是Wordpress网站或Joomla）中安装了Google Recaptcha 所以不要提供任何WP插件或Joomla扩展程序:)
我的问题是，该网站是响应式的，而recaptcha则不是。当我使用Firebug查找其样式时，我意识到不仅Google提供的库不包含css文件，而且我无法在custom-styles.css文件中覆盖它们，因为Google非常周到地应用了!important选择器在他们的css中攻击了一切，但我甚至尝试对它进行分类，以便我可以破解并希望覆盖Google的样式但是插件无法正常工作：（
有什么想法吗？
P.S。我也没有使用不同的重新验证码。抱歉。我确定这里有一些重新认识的极客;）
这是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>
这就是我在页面中所拥有的内容
require_once('recaptchalib.php');
$publickey = "your_public_key"; // you got this from the signup page
echo recaptcha_get_html($publickey);
这是我的问题
15 个答案:
答案 0 :(得分：19)
更改了自动高度和媒体查询
@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;
}
}
答案 1 :(得分：4)
Google提供了有关如何在此处设置recaptcha表单样式的完整文档：
https://developers.google.com/recaptcha/docs/display
您可以完全覆盖他们自己提供的html / css。
答案 2 :(得分：2)
您可能想要添加一些CSS样式，但我们选择删除一些不必要的内容。
将此代码添加到您的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;
}
}
答案 3 :(得分：2)
答案 4 :(得分：2)
对于reCAPTCHA（requiers 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(); });
});
这基本上会检查您的浏览器宽度，并取决于它应该转换的比例。此时的最佳解决方案。
屏幕截图结果（全宽，小宽度，最小宽度）：
答案 5 :(得分：1)
最好的方法是使用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;
}
答案 6 :(得分：1)
您只需为所需的特定设备添加一些转换样式：
@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; }
}
答案 7 :(得分：1)
在我的情况下，我减小了它的比例，并通过 Bootstrap 4 网格系统强制在中心上进行一些水平对齐。 Click here查看结果。
代码：
<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>
答案 8 :(得分：0)
建立Jan's回答和Siraj Khan's回答，我添加了一些样式来格式化右侧的按钮，让您刷新图像，大声播放，了解更多内容，阅读隐私＆安培;条款更容易。
@media only screen 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: 95% !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;
}
#recaptcha_table tbody tr td {
padding: 0 !important;
width: 75px;
}
.recaptchatable .recaptcha_image_cell {
padding-right: 0 !important;
}
#recaptcha_privacy a {
line-height: 1.2em;
}
span#recaptcha_privacy {
width: 50px;
}
}
答案 9 :(得分：0)
这可能会帮助你在主div上使用变换，你可以调用recaptcha
transform: scale(0.75);
transform-origin: left top;
答案 10 :(得分：0)
以下是我在2017/2018年找到的最佳解决方法：
.g-recaptcha > div {
width: 100% !important;
}
.g-recaptcha iframe {
width: 100% !important;
}
答案 11 :(得分：0)
这是我的媒体查询解决方案。我使用scale将其缩小到适合移动设备的大小。
一个简单有效的解决方案：
@media (max-width:575px) {
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
margin-bottom: -20px;
}
}
答案 12 :(得分：0)
您只需将样式属性从下面的代码复制到代码中，即可解决问题。
<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>
有关更多详细信息，请打开此Link
答案 13 :(得分：0)
晚安，我在jquery中创建了此代码，希望对您有所帮助，您可以修改值
<script>
$(window).resize(function(){
var widthInput = $('input').width()
const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total
$('.gc-recaptcha').css('transform','scale('+total+')');
});
$(document).ready(function(){
var widthInput = $('input').width()
const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total
$('.gc-recaptcha').css('transform','scale('+total+')');
})
// transform:scale(1.26) !important;
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
只需要组织`
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="g-recaptcha" data-sitekey="|*SEU-SITE-KEY*|"></div>
</div>
.gc-recaptcha {
transform-origin:0 0 !important;
}
`
答案 14 :(得分：-1)
晚安，我在jquery中创建了此代码，希望对您有所帮助，您可以修改值
<script>
$(window).resize(function(){
var widthInput = $('input').width()
const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total
var teste = widthInput <= 664 ? "Sim" : "nao";
console.log(total);
$('.gc-reset').css('transform','scale('+total+')');
});
$(document).ready(function(){
var widthInput = $('input').width()
const defaulCaptchaWidth = 294.5651;
var total = widthInput * 100/defaulCaptchaWidth/100
total = widthInput <= 664 ? total+0.035 : total
var teste = widthInput <= 664 ? "Sim" : "nao";
console.log(total);
$('.gc-reset').css('transform','scale('+total+')');
})
// transform:scale(1.26) !important;
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
只需要整理
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？