Bagaimana saya bisa membuat lebar 100% TextArea tanpa meluap ketika padding hadir dalam CSS?

426

Saya memiliki cuplikan CSS dan HTML berikut ini sedang ditampilkan.

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>
Luaskan cuplikan

Apakah masalahnya adalah area teks menjadi 8px lebih lebar (2px untuk batas + 6px untuk bantalan) daripada induknya. Apakah ada cara untuk terus menggunakan border dan padding tetapi membatasi ukuran total textareadengan lebar induk?

html css stylesheet Eric Schoonover
sumber
Btw ada artikel bagus untuk ini oleh Jeffrey Way di tutsplus di sini: net.tutsplus.com/tutorials/html-css-techniques/... Mungkin itu akan membantu seseorang;)
Seseorang

Jawaban:

664

Mengapa tidak melupakan peretasan dan lakukan dengan CSS?

Yang sering saya gunakan:

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Lihat dukungan browser di sini .

Piet Bijl
sumber
22
Saya tidak percaya ini berhasil. Tapi itu terjadi. CSS tidak pernah semudah ini. :-)
Nate Bird
1
Ini harus menjadi salah satu hal paling keren yang saya temukan dalam beberapa saat. Terima kasih, ada kemungkinan ada cara untuk melakukan ini di IE7 juga?
Jeremy A. West
47
Perhatikan bahwa Anda masih ingin menggunakan lebar: 100% bersamaan dengan kotak batas.
Tyler
3
Tidakkah versi lama Internet Explorer hanya menggunakan perilaku kotak batas?
Peter Hedberg
3
dapatkah seseorang menjelaskan ini, ke mana kelas ini pergi? sebuah div mengelilingi textarea?
koolaang
81

Jawaban untuk banyak masalah pemformatan CSS tampaknya adalah "tambahkan lagi <div>!"

Jadi, dalam semangat itu, sudahkah Anda mencoba menambahkan pembungkus div yang batas / padding diterapkan dan kemudian meletakkan textarea lebar 100% di dalamnya? Sesuatu seperti (belum diuji):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
Luaskan cuplikan

Dave Sherohman
sumber
1
Saya akhirnya menjauh dari menggunakan% lebar. Saya percaya pendekatan Anda akan berhasil juga. Terima kasih!
Eric Schoonover
5
Jangan lupa menambahkan "." ke kelas pembuat teks.
Chris Porter
3
@ Chris: Terima kasih dan diperbaiki. Saya sedikit terkejut bahwa butuh hampir satu setengah tahun bagi seseorang untuk menangkap itu ...
Dave Sherohman
2
Bagaimana scrollbar textarea akan terlihat dalam kasus ini?
Daniel LeCheminant
1
Di chrome, ketika Anda memfokuskan elemen textarea itu akan menjadi tinggi secara otomatis dan jika Anda membuat padding untuk pembungkus div, padding ini akan terlihat dan dua perbatasan akan terlihat karena itu. Satu dari hightlighting dan yang lain dari .textwrapper border: 1px solid # 999999;
Seseorang
22

mari kita pertimbangkan hasil akhir yang diberikan kepada pengguna tentang apa yang ingin kita capai: sebuah textarea empuk dengan baik perbatasan dan padding, yang karakteristiknya adalah bahwa diklik mereka memberikan fokus ke textarea kita, dan keuntungan dari lebar 100% otomatis tipikal elemen blok.

Pendekatan terbaik menurut saya adalah menggunakan solusi tingkat rendah sejauh mungkin, untuk mencapai dukungan browser maksimum. Dalam hal ini satu-satunya HTML bisa berfungsi dengan baik, menghindari penggunaan Javascript (yang bagaimanapun kita semua suka).

Tag LABEL datang dalam bantuan kami karena memiliki perilaku seperti itu dan diizinkan mengandung elemen input yang harus dialaminya. Gaya standarnya adalah salah satu elemen sebaris, jadi, dengan memberi label gaya tampilan blok, kami dapat memanfaatkan lebar 100% otomatis termasuk padding dan border, sedangkan textarea bagian dalam tidak memiliki batas, tanpa padding, dan lebar 100% .

Melihat pada spesifik W3C keuntungan lain yang mungkin kita perhatikan adalah:

  • atribut "for" tidak diperlukan: ketika tag LABEL berisi input target, secara otomatis memfokuskan input anak ketika diklik;
  • jika label eksternal untuk textarea telah dirancang, tidak ada konflik terjadi, karena input yang diberikan mungkin memiliki satu atau lebih label.

Lihat spesifikasi W3C untuk informasi lebih rinci.

Contoh sederhana:

.container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }
<body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>
Luaskan cuplikan

Padding dan border elemen .textareaContainer adalah elemen yang ingin kami berikan kepada textarea. Coba edit mereka untuk mengubahnya sesuai keinginan. Saya memberi padding besar dan terlihat dan berbatasan dengan elemen .textareaContainer untuk membiarkan Anda melihat perilaku mereka ketika diklik.

Emanuele Del Grande
sumber
Tidak yakin apa yang didapat lintas-browser mengintai di sini, tapi saya suka pendekatannya. +1
HRJ
15

Jika Anda tidak terlalu peduli tentang lebar padding, solusi ini sebenarnya akan menjaga padding dalam persentase juga ..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Tidak sempurna, tetapi Anda akan mendapatkan lapisan dan lebarnya menambahkan hingga 100% jadi semuanya bagus

qui
sumber
12

Saya menemukan solusi lain di sini yang sangat sederhana: tambahkan padding-right ke wadah textarea. Ini menjaga margin, batas, dan bantalan pada textarea, yang menghindari masalah yang ditunjukkan Beck tentang sorotan fokus yang diletakan chrome dan safari di sekitar textarea.

Padding-right penampung harus merupakan jumlah margin efektif, batas, dan pelapis di kedua sisi textarea, ditambah setiap pelapis yang mungkin Anda inginkan untuk wadah. Jadi, untuk kasus di pertanyaan awal:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}

<div class="textareacontainer">
    <textarea></textarea>
</div>
Brian
sumber
1
+1 Ini akan berfungsi di lebih banyak peramban daripada pernyataan CSS3. Kebenaran yang disayangkan adalah bahwa dunia masih membutuhkan div pembungkus.
BenSwayne
Saya sangat suka jawaban ini. Itu membuat textarea snap agar pas tanpa angka persen ajaib kurang dari 100%. Anda dapat menggunakan bantalan di semua sisi di pembungkus untuk memaksa area teks untuk bergerak dan tetap di dalam induk. Tinggi min dan tinggi harus 100% pada pembungkus juga. Textarea kemudian dapat diatur ke 100% dengan padding yang sama untuk membuat semuanya pas.
justdan23
9

Kode ini berfungsi untuk saya dengan IE8 dan Firefox

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Jeff Guest
sumber
Bekerja di Chrome juga.
Sanjeev
5

Anda dapat menggunakan properti ukuran kotak, didukung oleh semua browser yang memenuhi standar utama dan IE8 +. Anda masih membutuhkan solusi untuk IE7. Baca lebih lanjut di sini .

jzfgo
sumber
@ DavidJohnstone: Dan karena Anda tidak sedang mengembangkan situs untuk IE7 atau lebih lama, ini adalah solusinya :)
Jonatan Littke
2

Tidak, Anda tidak dapat melakukannya dengan CSS. Itulah alasan Microsoft awalnya memperkenalkan model kotak yang lain, dan mungkin lebih praktis . Model kotak yang akhirnya menang, membuatnya tidak praktis untuk mencampur persentase dan unit.

Saya tidak berpikir itu baik-baik saja dengan Anda untuk mengekspresikan padding dan lebar perbatasan dalam persentase orang tua juga.

buti-oxa
sumber
2

Saya mencari solusi inline-styling daripada solusi CSS, dan ini adalah yang terbaik yang bisa saya lakukan untuk textarea responsif:

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>
Astaga
sumber
1

Jika Anda membalut dan mengimbanginya seperti ini:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

sisi kanan textarea benar-benar sejajar dengan sisi kanan wadah, dan teks di dalam textarea sejajar sempurna dengan teks tubuh dalam wadah ... dan sisi kiri textarea 'menonjol keluar' sedikit. terkadang lebih cantik.

Commonpike
sumber
1

Gunakan properti ukuran kotak :

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

Itu akan membantu

pengguna3074446
sumber
1

Bagi orang-orang yang menggunakan Bootstrap, textarea.form-control dapat menyebabkan masalah ukuran textarea juga. Chrome dan Firefox tampaknya menggunakan ketinggian yang berbeda dengan Bootstrap CSS berikut:

textarea.form-conrtol{
    height:auto;
}
Gwi7d31
sumber
1

Saya sering memperbaiki masalah itu dengan calc(). Anda cukup memberi textarea lebar 100% dan jumlah padding tertentu, tetapi Anda harus mengurangi total padding kiri dan kanan dari lebar 100% yang Anda berikan ke textarea:

textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

Atau jika Anda ingin memberikan teks perbatasan:

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
Jeroen Bellemans
sumber
0

Bagaimana dengan margin negatif?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}
Meustrus
sumber
0 

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
<div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>
Luaskan cuplikan

antelove
sumber