質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

2回答

3850閲覧

reCAPTCHAをbootstrap3でレスポンシブにするには?

wanabeeee

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2016/03/17 15:40

編集2016/03/18 11:57

https://www.google.com/recaptcha/intro/index.html
Google reCAPTCHAをbootstrapでデザインしたログイン画面にreCHAPTCHAをつけたのですが、いくつかサイトをみてCSSを上書いて?レスポンシブにするのを試してみたのですが、どうにも横幅をinput type="text"などに合わせることができません。

もしやり方をご存知の方がいましたら教えていただけたら幸いです。
JSの利用でも構いません。

以下にソースを記載いたします。

HTML

1<div class="row"> 2 <div class="col-md-4 col-md-offset-4"> 3 <div class="panel panel-default"> 4 <div class="panel-heading"> 5 <h2 class="panel-title">ログイン</h2> 6 </div> 7 <div class="panel-body"> 8 <form action="" id="" method="post" > 9 <fieldset> 10 <div class="form-group"> 11 <input name="" class="form-control" type="text" id=""/> 12 </div> 13 <div class="form-group"> 14 <input name="" class="form-control" type="password" id=""/> 15 </div> 16 <div class="form-group"> 17 <script src='https://www.google.com/recaptcha/api.js?hl=ja'></script> 18 <div class="g-recaptcha" data-sitekey="hogehoge"></div> 19 </div> 20 <button type="submit" class="btn btn-lg btn-success">ログイン</button> 21 </fieldset> 22 </form> 23 </div> 24 </div> 25 </div> 26</div>

以上、よろしくお願い致します。

2016-03-18 追記
panel-defaultを追加しました
CSSは以下から取得しています
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
添付画像を追加しました
画像1
画像2
雑なイメージで申し訳ないですが・・
「私はロボットではありません」のところを伸び縮みさせたいです。
画像3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takumaro_web

2016/03/18 09:01

cssとキャプチャも貼り付けて貼り付けてもらえますか? >横幅をinput type="text"などに合わせることができません。 どこの横幅か教えてください!
guest

回答2

0

自己解決

クロスドメインのiframe内CSSをいじるのは難しそうでしたので自己解決とさせていただきます。
見ていただいた方・調べていただいた方、ありがとうございました。

投稿2016/03/20 18:23

wanabeeee

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

<div class="g-recaptcha" data-sitekey="hogehoge" style="width:100%;"></div> とインラインで記述をしてしまうか cssに .g-recaptcha { width:100%; } を追記する必要があると思います。

javascriptで要素を読みこんでいるようですので、chromeのコンソールなどで、
reCHAPTCHA部分のhtmlのレンダリングをもう少し把握しないと詳細はこれ以上わかりません。

投稿2016/03/20 09:34

921138

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wanabeeee

2016/03/20 18:26

ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問