Primordial google recaptcha css pour le rendre réceptif
J'ai installé Google Recaptcha dans un site (pas un site WordPress ou Joomla) Donc, ne pas offrir toutes les plugins WP ou Joomla Extension 🙂
Mon problème est, le site est responsive et recaptcha ne l'est pas. Lorsque j'utilise Firebug pour trouver son style, j'ai réalisé que non seulement la bibliothèque que Google fournit ne contient pas les fichiers css, et je ne peux pas les remplacer dans mon custom-styles.fichier css parce que Google, très soigneusement, appliquer le !important
sélecteur de hack pour TOUT le css, mais j'ai même essayé de classement afin que je puisse faire une brèche et, espérons-le remplacer Google styles, mais alors le plugin ne fonctionne pas:(
Des idées?
p.s. Je ne suis pas en utilisant un autre re-captcha. Désolé. Je suis sûr qu'il ya des recaptcha geeks ici 😉
Voici le code HTML. C'est ce que l'recaptcha.php rend à partir du serveur. CE n'EST PAS CE que je j'AI DANS LA PAGE PHP...(Ne pas avoir un 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
OriginalL'auteur LOTUSMS | 2014-04-10
Vous devez vous connecter pour publier un commentaire.
Changé automatique de la hauteur et de la requête de média
OriginalL'auteur Jan
Google a une documentation complète sur la façon de style de recaptcha formes ici:
https://developers.google.com/recaptcha/docs/display
et vous pouvez tout à fait remplacer le html/css ils fournissent à votre propre.
Ce n'est plus vrai, Google Recaptcha 2.0 ne fait pas de permettre la personnalisation du thème: stackoverflow.com/questions/27713505/recaptcha-api-v2-styling
OriginalL'auteur Marc B
Vous voudrez peut-être ajouter un peu de CSS style, mais nous avons opté pour la suppression de tout ce qui n'était pas nécessaire.
Ajouter ce code dans votre fichier css :
OriginalL'auteur Siraj Khan
Essayer celui-ci. Google sensible reCAPTCHA
OriginalL'auteur Hardik
La meilleure façon est que vous utilisez le google recaptcha et utiliser ce code css pour rendre sensible,
OriginalL'auteur A. Bar
Vous pouvez simplement ajouter un peu de transformer le style de l'appareil vous avez besoin:
OriginalL'auteur Nelly Sattari
Pour reCAPTCHA (prevoit jQuery):
Fondamentalement vérifie votre navigateur largeur et dépend de l'échelle, il doit être transformé. La meilleure solution à ce stade.
Captures d'écran de résultat (pleine largeur, largeur plus petite, la plus petite largeur):
OriginalL'auteur Jordy
Construction d' Jan réponse et Siraj Khan réponse, j'ai ajouté un peu plus de style à formater les boutons sur le côté droit, ce qui permettra de vous rafraîchir l'image, jouer à voix haute, en savoir plus et de lire de la confidentialité & conditions plus facile.
OriginalL'auteur Daniel
peut-être cela pourrait vous aider à transformer votre div principale où u appel recaptcha
OriginalL'auteur Ismail Farooq
Ici est la meilleure solution que j'ai trouvé en 2017/2018 :
OriginalL'auteur ShellCode
Dans mon cas, j'ai diminué l'ampleur et je me force à certains alignement horizontal sur le centre par Bootstrap 4 système de grille.
Cliquez ici pour voir le résultat.
Code:
OriginalL'auteur Bréndal Teixeira
C'est ma solution avec les media queries. - Je l'utiliser à l'échelle de l'échelle jusqu'à une taille raisonnable pour un mobile.
Une solution simple et efficace:
OriginalL'auteur rturkek