入力幅が100％の場合、常にdivを含むオーバーライドされますか？

Question

ご注意ください：http://jsfiddle.net/cBWaG/4/

私はパディング付きの容器を持っています。私が望むのは、入力（テキスト）をパディング内から100％幅にすることです。現在のところ、パディングはオーバーシュートしています。固定幅を使わずに入力がコンテナ/パディングをオーバーシュートするのを防ぐ方法に関する提案？標準のボックスモデルの要素の

おかげ

Answer 1

フォームの入力は実際には難しいです。また、すべてのブラウザでスタイルを一貫して見せることは特に難しいです。テキスト入力をスタイルするために私が見つけた最良の方法の1つは、境界線、アウトライン、パディング、マージンを取り除くことです。次に、div、border、outline、padding、およびmarginで入力を囲みます。

私はあなたが望むものを達成したと思います。このフォークされたjsFiddleを確認してください：http://jsfiddle.net/aP2Ju/

Answer 2

widthプロパティは、パディング、マージンやボーダーが含まれていません。それは要素自体の内容ではなく要素の内容に与えられる幅です。ボックスは、パディングのサイズだけ幅よりも大きい。境界が追加され、最後にマージンが追加されます。

IE（v4および5）の古いバージョンは、現在、「Quirksモード」として知られている非標準ボックスモデルを使用していました。このボックスモデルは、ボックスのwidthプロパティに含まれるように、測定領域内にパディングと境界線を配置しました。このモデルは、幅100％のボックスを簡単に作成できます。

両方のボックスモデルには長所がありますが、IEはボックスモデルを実装した際に標準に反していました。これは、開発者がIE用に設計された古いサイトを更新するのが難しい理由の1つでしたブラウザ。

最近、デザイナーがページ上の任意の要素に使用するボックスモデルを選択できるようにするCSSプロパティーが追加されました。このプロパティはbox-sizingと呼ばれ、現在使用されているほとんどのブラウザでサポートされています。それをサポートしていない唯一の主要なものはIE6とIE7です（他はベンダープレフィックスを必要としますが、サポートしています）。この機能のブラウザサポートの表については、こちらを参照してください。http://caniuse.com/#search=box-sizing

他のオプションは、単純に幅を設定しないことです。 A <div>の要素はデフォルトで利用可能な幅に設定されていますが、これは基本的には100％を意味しますが、パディングと余白に何が設定されているかに関係なく、幅をオーバーライドしてこの設定に戻したい場合は、width:auto;を使用します。

希望に役立ちます。

Answer 3

指定された幅やパディングなしでコンテナdiv内に新しいdivを作成します。パディング内で自動的に全幅を占めます。次に、インプットの幅を100％にして内側のdivを完全に埋めることができます。

Answer 4

ちょうど注：この原因は、ボックスモデルの性質です。 <input>の幅は実際には100％+パディングです。

Answer 5

width: 100%; 

エレメントのTOTALは、パディングを含めて、その親によって定義されたとおりに使用可能です。

width: auto; 

REMAININGスペースを埋めるように要素を拡張します。

Answer 6

はい、入力要素のサイズを処理することは困難である。この

​​3210

Demo

Answer 7

を試してみてください。ボックスサイズは大きな違いはありませんが、それでもボーダーはオーバーランします。 divの使用は良いアプローチだと言いました。ここで私がIE 11（11.0.18）でテストしたものがあります。

divを使用できるようになりました。キーは、入力要素のマージンとパディングを0pxとwidth：100％に設定することです。これにより、入力要素が親コンテナの「div」要素を満たすようになります。

<fieldset id="inputs"> 
     <div id="username_div"> 
      <input id="username" type="text" placeholder="username" required autofocus /> 
     </div> 
     <div id="password_div"> 
      <input id="password" type="password" placeholder="password" /> 
     </div> 
    </fieldset> 


    #inputs div { 
     border: 1px solid red; 
     margin: 5px 10px 5px 10px; 
     padding: 10px 10px 10px 30px; 
     border: 1px solid #CCC; 
     border-radius: 5px; 
    } 

    #inputs input { 
     margin:0px; 
     padding:0px; 
     width:100%; 
    }