Padding pada input memecah lebar 100%

Oke, jadi kita tahu bahwa menyetel padding ke objek menyebabkan lebarnya berubah walaupun diatur secara eksplisit. Sementara seseorang dapat memperdebatkan logika di balik ini, itu menyebabkan beberapa masalah dengan beberapa elemen.

Untuk sebagian besar kasus, Anda hanya menambahkan elemen turunan dan menambahkan padding ke elemen itu alih-alih yang ditetapkan menjadi 100%, tetapi untuk input formulir, itu bukan langkah yang mungkin.

Lihatlah ini: http://sandman.net/test/formcss.html

Input kedua memiliki padding set ke 5px yang saya lebih suka dari pengaturan default. Namun sayangnya hal itu membuat input tumbuh 10px ke segala arah, termasuk menambahkan 10px ke lebar 100%.

Masalahnya di sini adalah saya tidak bisa menambahkan elemen turunan di dalam input jadi saya tidak bisa memperbaikinya. Jadi pertanyaannya adalah:

Apakah ada cara untuk menambahkan padding di dalam input dengan tetap menjaga lebar 100%? Ini harus 100% karena formulir akan membuat orang tua lebar yang berbeda jadi saya tidak tahu sebelumnya lebar orang tua.

Menggunakan CSS3 Anda dapat menggunakan ukuran kotak properti untuk mengubah cara browser menghitung lebar 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+ */
  }

Anda dapat membaca lebih lanjut tentang ini di sini: http://css-tricks.com/box-sizing/

Saya tidak tahu bagaimana cross browser kompatibel (berfungsi di firefox dan safari), tetapi Anda bisa mencoba solusi ini:

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

(Hanya memposting nilai yang saya ubah)

Salah satu pilihan adalah untuk membungkus INPUTdalam DIVyang memiliki padding.

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>

Yang sering dilupakan calcbisa datang ke penyelamatan di sini:

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

Karena kita tahu padding akan menambah lebar elemen, kita cukup mengurangi padding dari keseluruhan lebar. Ini didukung oleh semua browser utama, responsif, dan tidak memerlukan div pembungkus yang berantakan.

Saya telah mengalami beberapa masalah dengan sesuatu yang mirip dengan ini. Saya memiliki tds dengan input 100% dan padding kecil. Apa yang saya lakukan adalah mengkompensasi bantalan pada td sebagai berikut:

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

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

padding 8px untuk menyertakan batas dan padding dari input / textarea. Semoga ini membantu!

Mungkin mengambil latar belakang perbatasan + dari input, dan sebaliknya melampirkannya divdengan perbatasan + latar belakang dan lebar: 100%, dan menetapkan margin pada input?

Salah satu solusi yang saya temukan berfungsi adalah benar-benar memposisikan input dengan tag induk yang relatif diposisikan.

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

Terapkan gaya:

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

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

Satu-satunya hal yang perlu diperhatikan adalah bahwa tag paragraf memerlukan pengaturan ketinggian karena anak-anak yang diposisikan mutlak tidak akan memperluas ketinggiannya. Ini menghindari kebutuhan untuk mengatur width: 100%dengan menguncinya ke sisi kiri dan kanan elemen induk.

Coba gunakan persentase untuk lapisan Anda:

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

}

Jika Anda khawatir tentang pengguna di browser lama yang tidak bisa melihat bayangan kotak, berikan saja warna latar belakang halus sebagai cadangan. Jika Anda menggunakan piksel untuk hal-hal semacam ini, maka kemungkinan Anda menggunakannya di tempat lain, yang bisa menghadirkan beberapa tantangan ekstra, beri tahu saya jika Anda mengalaminya.

Satu-satunya hal yang saya tahu untuk mencegah hal ini adalah menetapkan nilai seperti itu 100% -10. Tetapi memiliki beberapa masalah kompatibilitas.