Bagaimana cara mengatur ukuran kotak teks HTML?

Bagaimana cara mengatur ukuran kotak teks HTML?

Gunakan saja:

textarea {
    width: 200px;
}

atau

input[type="text"] {
    width: 200px;
}

Tergantung apa yang Anda maksud dengan 'kotak teks'.

Markup Anda:

<input type="text" class="resizedTextbox" />

CSS:

.resizedTextbox {width: 100px; height: 20px}

Perlu diingat bahwa ukuran kotak teks adalah "korban" dari model kotak W3C . Yang saya maksud dengan korban adalah bahwa tinggi dan lebar kotak teks adalah jumlah dari properti tinggi / lebar yang ditetapkan di atas, selain tinggi / lebar bantalan, dan lebar batas. Karena alasan ini, kotak teks Anda akan memiliki ukuran yang sedikit berbeda di browser yang berbeda tergantung pada padding default di browser yang berbeda. Meskipun browser yang berbeda cenderung menentukan padding yang berbeda untuk kotak teks, sebagian besar lembar gaya reset cenderung tidak menyertakan <input />tag di lembar reset mereka, jadi ini adalah sesuatu yang perlu diingat.

Anda dapat membakukan ini dengan menentukan padding Anda sendiri. Berikut adalah CSS Anda dengan padding yang ditentukan, sehingga kotak teks terlihat sama di semua browser:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

Saya menambahkan padding 1 piksel karena beberapa browser cenderung membuat kotak teks terlihat terlalu penuh jika paddingnya 0px. Bergantung pada desain Anda, Anda mungkin ingin menambahkan lebih banyak padding, tetapi sangat disarankan Anda menentukan padding sendiri, jika tidak, Anda akan menyerahkannya ke browser yang berbeda untuk memutuskan sendiri. Untuk lebih konsisten di seluruh browser, Anda juga harus menentukan border sendiri.

input[type="text"]
{
    width:200px
}

Kode kotak teks Anda:

<input type="text" class="textboxclass" />

Kode CSS Anda:

input[type="text"] {
height: 10px;
width: 80px;
}

atau

.textboxclass {
height: 10px;
width: 80px;
}

Jadi, pertama Anda memilih elemen Anda dengan atribut (lihat contoh pertama) atau kelas (lihat contoh terakhir). Nanti, Anda menetapkan nilai tinggi dan lebar ke elemen Anda.

Ini berfungsi untuk saya di IE 10 dan FF 23

<input type="text" size="100" />

Jika Anda tidak ingin menggunakan metode kelas, Anda dapat menggunakan metode orang tua-anak untuk membuat perubahan di kotak teks.

Misalnya. Saya telah membuat formulir di div formulir saya.

Kode HTML:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

Sekarang kode CSS akan menjadi seperti:

.form textarea{
    height: 220px;
    width: 342px; 

Masalah terpecahkan.

Mencari! Atribut width dipotong oleh atribut max-width. Jadi saya menggunakan ....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

Mencoba:

input[type="text"]{
padding:10px 0;}

Dengan cara ini ia tetap tidak bergantung pada ukuran teks yang telah disetel untuk kotak teks. Anda menambah tinggi menggunakan bantalan sebagai gantinya

Coba kode ini:

input[type="text"]{
 padding:10px 0;}

Dengan cara ini tetap tidak tergantung pada ukuran teks yang telah ditetapkan untuk kotak teks. Anda menambah tinggi menggunakan bantalan sebagai gantinya.

Elemen dapat diukur dengan atribut heightdan width.

Anda dapat membuat lebar masukan bergantung versus lebar penampung.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}