Remplacement de Google Recaptcha CSS pour le rendre réactif
J'ai installé Google Recaptcha dans un site (pas un site Wordpress ou Joomla) Donc, n'offrez aucun WP plugins ou extension Joomla) :)
Mon problème est que le site est réactif et que recaptcha ne l'est pas. Lorsque j'utilise Firebug pour trouver ses styles, j'ai réalisé que non seulement la bibliothèque fournie par Google ne contient pas les fichiers css, et je ne peux pas les remplacer dans mon fichier custom-styles.css car Google, très réfléchi, a appliqué le !important le sélecteur pirate TOUT dans leur CSS, mais j'ai même essayé de le classer afin de pouvoir faire une violation et, espérons-le, remplacer les styles de Google, mais le plugin ne fonctionne pas :(
Des idées?
p.s. Je n'utilise pas non plus un re-captcha différent. Pardon. Je suis sûr qu'il y a des geeks recaptcha ici;)
Voici le HTML. C'est ce que le recaptcha.php rend depuis le serveur. CECI IS PAS CE QUE J'AI DANS LA RÉELLE PHP PAGE ... (Ne pas avoir de CSS, et c'est le principal problème))
<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>
C'est ce que j'ai dans la page
require_once('recaptchalib.php');
$publickey = "your_public_key"; // you got this from the signup page
echo recaptcha_get_html($publickey);
Et voici mon problème
Hauteur automatique et requête multimédia modifiées
@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;
}
}
Pour reCAPTCHA (nécessite 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(); });
});
Cela vérifie essentiellement la largeur de votre navigateur et dépend de l'échelle à laquelle il doit également être transformé. La meilleure solution à ce stade.
Résultat des captures d'écran (pleine largeur, plus petite largeur, plus petite largeur):
Google a une documentation complète sur la façon de styler les formulaires de recaptcha ici:
https://developers.google.com/recaptcha/docs/display
et vous pouvez remplacer complètement le html/css qu'ils fournissent avec le vôtre.
Vous voudrez peut-être ajouter un style CSS, mais nous avons choisi de supprimer tout ce qui n'était pas nécessaire.
Ajoutez ce code à votre fichier 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;
}
}
Dans mon cas, j'en ai réduit l'échelle et je force un certain alignement horizontal au centre à travers Bootstrap 4 système de grille. Cliquez ici pour voir le résultat.
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>
Vous pouvez simplement ajouter un style de transformation pour le périphérique spécifique dont vous aviez besoin:
@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; }
}
La meilleure façon est d'utiliser la recaptcha de google et d'utiliser ce code css pour rendre responsive,
#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;
}
Ceci est ma solution avec les requêtes multimédias. J'utilise l'échelle pour la réduire à une taille raisonnable pour mobile.
ne solution simple et efficace:
@media (max-width:575px) {
#rc-imageselect, .g-recaptcha {
transform:scale(0.77);
transform-Origin:0 0;
margin-bottom: -20px;
}
}
peut-être cela pourrait vous aider à utiliser la transformation sur votre div principale où vous appelez recaptcha
transform: scale(0.75);
transform-Origin: left top;
Il vous suffit de copier l'attribut de style du code ci-dessous dans votre code, puis votre problème sera résolu.
<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>
Pour plus de détails, ouvrez ceci Lien
En s'appuyant sur Jan's réponse et Siraj Khan's réponse, j'ai ajouté un peu plus de style pour formater les boutons sur le côté droit qui vous permettent de rafraîchir l'image, de jouer à haute voix, d'en savoir plus et lisez plus facilement la confidentialité et les conditions d'utilisation.
@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;
}
}
Voici la meilleure solution de contournement que j'ai trouvée en 2017/2018:
.g-recaptcha > div {
width: 100% !important;
}
.g-recaptcha iframe {
width: 100% !important;
}