web-dev-qa-db-ja.com

親の幅を満たすようにテキスト入力のスタイルを設定することは可能ですか？

私はこの問題を何年も抱えており、以前にも同様の質問を見たことがありますが、要素にwidth: 100%を設定すると、パディング、マージン、境界線が増加するという事実に対処したものはありません。 幅。

これを見てください フィドル 。

一番上の白いテキストボックスは、幅が100%に設定された標準のテキストボックスです。ご覧のとおり、マージン、パディング、境界線の設定により、親がオーバーフローします。

緑色のテキストボックスは、position: absoluteを使用してdivのようなスタイルになっています。これは、Webkitブラウザーでは夢のように機能しますが、他の場所では機能しません。

赤いdivはコントロールです-入力をそのように動作させたい。

テキスト入力を最新のすべてのブラウザの赤いdivのように動作させる、つまり親のパディング内に収めるために使用できるハック/トリックはありますか？私のFiddleを編集するか、自分で作成して回答を添えてください。ありがとうございます。

csswidthtextinput
21
Hubro

あなたはできる：

input#classic
{
    width: 100%;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;        
}

JS Fiddle demo 。

オーバーフローが発生していたため、marginを削除し、box-sizingを設定して、要素の幅を含むボーダーとパディング。

30
David says reinstate Monica

calcを使用してマージンを補正します。box-sizingパディング用

input#classic
{
    padding: 5px;
    margin: 5px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

[〜＃〜]フィドル[〜＃〜]

2
Musa

display:table-cellプロパティで試してください

  display:table;
  display:table-cell;

それがあなたを助けるかもしれません

このリンクを確認してください

コンテナの残りの幅を埋めるためのスタイル入力要素

0
Prashobh