入力内のパディングは幅を100％に分割します

オブジェクトにパディングを設定すると、明示的に設定されていても、その幅が変化することがわかりました。これの背後にある論理を論じることはできますが、いくつかの要素でいくつかの問題を引き起こします。

ほとんどの場合、子要素を追加して、100％に設定された子要素ではなく、その要素にパディングを追加しますが、フォーム入力の場合、これは可能な手順ではありません。

これを見てください：http : //sandman.net/test/formcss.html

2番目の入力は、パディングが5pxに設定されています。これは、デフォルト設定よりもずっと好みです。ただし、残念ながら、これにより、入力がすべての方向に10px成長します（100％の幅に10pxが追加されるなど）。

ここでの問題は、入力内に子要素を追加できないため、修正できないことです。だから問題は：

幅を100％に保ちながら、入力内にパディングを追加する方法はありますか？フォームは異なる幅の親でレンダリングされるため、100％にする必要があるため、親の幅は事前にわかりません。

CSS3を使用すると、box-sizingプロパティを使用して、ブラウザーが入力の幅を計算する方法を変更できます。

  input.input {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
  }

詳しくは、http：//css-tricks.com/box-sizing/をご覧ください。

私はそれがどのようにブラウザー間で互換性があるかわかりません（FirefoxとSafariで動作します）。この解決策を試すことができます。

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

（私が変更した値のみを投稿しました）

1つのオプションは、パディングがINPUTあるDIVでラップすることです。

CSS：

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML：

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

忘れられがちなcalcことがここで助けになり得ます：

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

要素の幅にパディングが追加されることがわかっているので、全体の幅からパディングを差し引くだけです。それはすべての主要なブラウザーでサポートされており、応答が速く、面倒なラッパーdivを必要としません。

私はこれに似た何かでいくつかの問題を抱えています。入力が100％のtdsと小さなパディングがあります。私がしたことは、次のようにtdのパディングを補正することでした：

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

境界とinput / textareaのパディングを含めるための8pxのパディング。お役に立てれば！

おそらく、border + backgroundをから外し、input代わりに、divborder + backgroundとwidth：100％で囲み、input？にマージンを設定します。

私が見つけた解決策の1つは、相対的に配置された親タグで入力を絶対配置することです。

<p class="full-width-input">
    <input type="text" class="text />
</p>

スタイルを適用します。

p.full-width-input {
    position: relative;
    height: 35px;
}

p.full-width-input input.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
}

注意すべき唯一のことは、絶対位置に配置された子は高さを拡張しないため、段落タグには高さ設定が必要であることです。これwidth: 100%により、親要素の左側と右側にロックして設定する必要がなくなります。

パディングにパーセンテージを使用してみてください：

.input { 

  // remove border completely
  border: none;

  // don't forget to use the browser prefixes
  box-shadow: 0 0 0 1px silver;

  // Use PERCENTAGES for at least the horizontal padding
  padding: 5%; 

  // 100% - (2 * 5%)
  width: 90%; 

}

ボックスシャドウが表示されない古いブラウザーのユーザーが心配な場合は、バックアップとして微妙な背景色を入力してください。この種のことでピクセルを使用している場合、他の場所でピクセルを使用している可能性があり、いくつかの追加の問題が発生する可能性があります。問題が発生した場合はお知らせください。

これを防ぐために私が知っている唯一のことは、100％-10のような値を割り当てることです。ただし、互換性の問題がいくつかあります。