web-dev-qa-db-ja.com

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

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

ほとんどの場合、子要素を追加し、100％に設定した要素の代わりにその要素にパディングを追加しますが、フォーム入力の場合、それは可能なステップではありません。

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

2番目の入力のパディングは5pxに設定されていますが、これはデフォルト設定よりも非常に好みです。しかし、残念ながら、100％幅に10pxを追加するなど、入力はすべての方向に10px増加します。

ここでの問題は、入力内に子要素を追加できないため、修正できないことです。質問は次のとおりです。

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

cssinputpadding
115
Sandman

CSS3を使用すると、プロパティbox-sizingを使用して、ブラウザがinput。

  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/

256
Víctor Dieppa Garriga

ブラウザ間の互換性はわかりません（firefoxとsafariで動作します）が、このソリューションを試すことができます：

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

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

7
michaelk

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>
7
user7116

忘れられがちなcalcは、ここで救助できます。

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

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

4
XanderStrike

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

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

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

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

4
Keye

私が見つけた解決策の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%を親要素の左右にロックすることで設定する必要がなくなります。

1
Gabz

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

1
Amber

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

.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%; 

}

ボックスシャドウが見えない古いブラウザのユーザーが心配な場合は、バックアップとして入力に微妙な背景色を付けてください。この種のものにピクセルを使用している場合、他の場所でピクセルを使用している可能性があり、いくつかの余分な課題が発生する可能性があります。

0
stephenmurdoch