• 締切済み

input要素のブラウザによる長さの違いについて

お世話になっております。 今、ホームページを作成しているのですが メールの入力フォームを作成しており、 ブラウザによるinputフォームの長さの違いの解消に苦心しております。 特に macでのgooglechromeとwindowsのgooglechromeで 同じブラウザにも関らず表示される長さが変わってしまうところが解消できません。 <div id="mailform"> <p><input name="mail" id="input_form" value="テキスト" onfocus="this.value=''" tabindex="2" type="text"><br /></p> </div> #mailform{width:100px;} で設定しているのですが macでの表示が短くなってしまい、テキストが入りきりません。 どなたか解消方法分かる方がおられましたらご教示戴ければ幸いでございます。

  • jikon
  • お礼率50% (15/30)
  • CSS
  • 回答数3
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

<input name="mail" value="" size="20"-----のようにサイズは入れておきましょう。!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから size = cdata [CN] 　この属性は、ユーザエージェントに当該コントロールの初期幅指定を示す。この幅はピクセル値だが、 type属性が"text"または"password"の場合は、文字数を示す整数を値とする。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Forms in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#adef-size-INPUT )］より なお、ごらんのように文字数ですから、文字幅が違うとサイズは異なりますが、それは問題ではないでしょう。最大見込まれる数字を入れておきましょう。 #mailform{width:100px;} の指定は、id="mailform"の付いている要素に対して指定でしかありません。このセレクタは *#mailform　詳細度 0,1,0,0 と言う意味です。id属性がmailformである全称セレクタと言う意味です。本来なら div#mailform 詳細度0,1,0,1 　と書くべきでしょうが、詳細度がB=0と大きいことと、他にありえないので#だけでも構いません。 　しかし、widthプロパティは継承されませんから、その子孫要素であるpやinputには継承されません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 'width' 　Value: 　　　 <length> | <percentage> | auto | inherit 　Initial: 　　 auto 　Applies to:　 all elements but non-replaced inline elements, table rows, and row groups 　Inherited:　　no　<-- 継承しない 　Percentages:　refer to width of containing block 　Media: visual 　Computed value: the percentage or 'auto' as specified or the absolute length ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual formatting model details( http://www.w3.org/TR/CSS2/visudet.html#propdef-width )］より 　したがって記述するなら、 #mailform p input[name="mail"]{width:20em;} 　とかでしょうね。 #mailform　idがmailformである要素の子孫のpの子孫の属性名がnameであり、その値がmailであるinput要素{の幅width:の値は20(大文字のM２０個の幅)

回答No.2

フォントの違いじゃないでしょうか？ CSSでfont関連のプロパティ全て、letter-spacingなども含めてpxで指定しておけば、だいたい同じになるんじゃないでしょうか。 font-familyを同じにするためにWebFontsがありますが、 日本語フォントは5MB近くありますからあまりおすすめはしませんが、全く同じにするのを最優先にするならそれも必要だと思います。

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

boxの外側のblockを width:100px にして内側にinputを持ってきて width:100% にしたらできそうだけどそういうのはだめ？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • inputとtextareaに

    今、フォーム部品に以下のような指定をしています。 <input type="text" value="デフォルト値" onfocus="if(this.value==this.defaultValue)this.value = ''" onblur="if(this.value=='') this.value=this.defaultValue"> このonfocus以降の指定をinput type="text"とtextareaのみに自動で追加しようとしているのですが、調べてもよくわからなかったため質問することにしました。 このような指定はjavascriptでできますか？

  • div要素内の全input要素をdisable

    Javascriｐｔで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を すべてdisableにしたいです。 以下でうまくいきません。どなたかお知恵を頂けないでしょうか？ よろしくお願い致します。 var input_tags = document.getElementById("div_id").getElementsByTagName("input"); for(var input_tag in input_tags) { input_tag.disabled = true; }

  • パスワード入力フォームのガイドの制作するには・・・？

    入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを 作りたいのですが input type="text"　のフォームはできましたが input type="password"　のフォームに実装すると ガイド文字も●●●●と表示されてしまいます。 これを制作するのは無理なのでしょうか？ 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input type="password" name="pass" onfocus="if (this.value == 'パスワード') this.value='';" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。

  • input text　Chromeで出る枠を消す

    メールフォームを作っています。 GoogleChromeで input type=text（テキスト入力部）をクリックすると黄色い枠が出るのを消したいのですがどうすればいいでしょうか？教えてください。

    • ベストアンサー
    • CSS
  • パスワード入力フォームの実装で、ＩＥ６、７にも対応するには？

    入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを このサイトで教えてもらって実装したのですが Firefoxでは下記のソースで実装できたのですが ＩＥ６とＩＥ７ではフォームに入力すると 入力した文字が●●●●ではなく、そのまま表示されてしまいます。 これを●●●●になるようできないでしょうか？ 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> <script> <!-- function hide_pwd(pw){ if(pw == 'パスワード'){ document.getElementById("pwd").value =""; document.getElementById("pwd").setAttribute("type", "password"); } } // --> </script> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input id="pwd" type="text" name="pass" onfocus="javascript:hide_pwd(this.value);" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。

  • 入力フォームについて

    ＦＣ２のホームページを利用しています 入力フォームのサンプルを手本にして、以下のように作成しましたが 「送信ボタン」をクリックしても、メールが届きません。 どうしてでしょうか？ <form action="mailto:xxx@xxx.ne.jp" enctype="text/plain" method="post"> <p><label>NAME：<br /> <input type="text" name="名前" value="" tabindex="1" accesskey="b"> </label></p> <p><label>E-MAIL：<br /> <input type="text" name="メールアドレス" value="" tabindex="2" accesskey="a"> </label></p> <p><label>感想・ご意見<br> <textarea name="title" rows="15" cols="30" tabindex="9" accesskey="i"> </textarea> </label></p> <p> <input type="reset" value="送信" tabindex="10" accesskey="s"> <input type="reset" value="取消" tabindex="11" accesskey="r"> </p> </form>

  • ブラウザに応じたJavaScriptの書き方

    divの中にp、 pの中にspan、 spanの中にinputがあるとして、 クリックしたらそれぞれの要素のタグををalertで表示させたいとき、 （例１） <div onClick="a=event.target || event.srcElement;alert(a.tagName)">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> で良いと思います。 （IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み） ただ、onClick内をスッキリさせたいので （例２） <script> function whereYouClick1(){ 　a=event.target || event.srcElement; 　alert(a.tagName); } </script> <div onclick="whereYouClick1();">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> とすると、FirefoxとLunascapeで動かなくなります（よね？）。 苦肉の策として （例３） <script> function whereYouClick2(){ 　alert(a.tagName); } </script> <div onclick="a=event.target || event.srcElement;whereYouClick2()">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> としたらすべてのブラウザで動いたのですが、腑に落ちません。 これなら（例１）のままの方がすっきりして良かったような気がします。 ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、 Forefox, Lunascapeのために（例３）の書き方にならざるを得なくなると思いますが、気持ち悪いです。 もっときれいな書き方はないのでしょうか。 また、上の例では一旦 a=event.target || event.srcElement; としてから、 alert(a.tagName) とやっていますが、 alert(event.target.tagName || event.srcElement.tagName) とやったらIEではエラーとなりました。そんなもんなんでしょうか。 基本的な事柄で申し訳ありませんが、よろしくお願いします。

  • JQuery インプット要素 カウント減算について

    お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。 問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。 下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function() { var count; var scntDiv = $('tbody.row'); var i = $('#row').size() + 2; $('#addScnt').live('click', function() { $('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv); count = i++; document.getElementById('cnt').value=count; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); count = i--; document.getElementById('cnt').value=count; } return false; }); }); }); --> </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

  • セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするには？

    お世話になります。 セレクトメニューで選択された項目によって、HTMLの一部を表示したり非表示にしたりするにはどうすればいいでしょうか？ <select class = "select-box" tabindex="7" name='payment_string'> <option value="1,ジャパンネット銀行,0">ジャパンネット銀行</option> <option value="2,郵貯銀行,0">郵貯銀行</option> <option value="3,イーバンク銀行,0">イーバンク銀行</option> <option value="4,コンビニ決済,0">コンビニ決済</option> <option value="5,クレジットカード,0">クレジットカード</option> </select> 上記のようなセレクトメニューがあり、セレクトメニューが、『コンビニ 決済』、『クレジットカード』が選択されたときのみ下記の入力項目を表 示させたいと思っています。。 <div class='order_form_out_side_box'> <div class='order_form_name'> <p>ご住所</p> </div> <div class='order_form_contents'> <p>郵便番号：<input type = "text" class="name-box1" accesskey="i" tabindex="11" name = "bango" onkeyup="setbango(this.value)" value ="" /> <br /> <p>都道府県：<input type = "text" class="name-box1" accesskey="j" tabindex="12" name = "ken" value ="" /></p> <br /> <p>市・区：<input type = "text" class="name-box5" accesskey="k" tabindex="13" name = "shi" value ="" /></p> <br /> <p>町・村：<input type = "text" class="name-box5" accesskey="l" tabindex="14" name = "machi" value ="" /></p> <br /> <p>番地・建物名：<input type = "text" class="name-box5" accesskey="m" tabindex="15" name = "banchitate" value ="" /></p> <br /> </div> <br class='clear' /> </div> <div class='order_form_out_side_box'> <div class='order_form_name'> <p>電話番号</p> </div> <div class='order_form_contents'><p><input type = "text" class="name-box6" accesskey="n" tabindex="16" name = "tel" value ="" />&nbsp;ハイフンなしでご入力ください。</p> <br /> </div> JavaScriptを利用してやるという事は分かったのですが、JavaScript の知識がなく、どうすればいいのか分かりません。 どのようにすればこの機能を実現できるでしょうか？ご教授のほどよろ しくお願いします。

  • input要素のtype属性を変えたい

    携帯サイトのパスワード入力フォームで、最後に入力した1文字だけ表示し、他をマスクするというものがあり、面白いなと思ってPCサイト用にJavascriptで作ってみようと思いました。HTML部に <input type="password" id="pass" /> と書き、初期設定としてJavascript部に window.onload = function() { 　　var input = document.getElementById("pass"); 　　input.type = "text"; 　　input.onkeydown = 実装する関数; } と書いています。これはHTMLにイベントハンドラを設定したくない（HTMLとJavascriptを分離させたい）からです。type属性がpasswordだとどうやっても文字は見えないので、textに変えてキーが押されるごとに最後の文字以外をマスクしてvalueに挿入する方法を考えていますが、これがうまくいきません。どうやらtype属性は値を取得することは可能ですが、挿入（置き換え）することはできないようなのです（ここでエラーが起こっているようです）。他に input.removeAttribute("type"); input.appendAttribute("type", "text"); といったやり方も試してみましたが、うまくいきませんでした。 これは仕様で、どうやっても無理なのでしょうか？ <input type="password" /> を <input type="text" /> に変えれば対処できる問題ですが、Javascript不使用ユーザーにも対応できるようにしたいので、なんとか<input type="password" />形式のまま解決できませんでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する