Bir HTML metin kutusunun boyutunu nasıl ayarlarım?

Bir HTML metin kutusunun boyutunu nasıl ayarlarım?

Sadece kullan:

textarea {
    width: 200px;
}

veya

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

'Metin kutusu' ile ne demek istediğinize bağlı olarak.

İşaretlemeniz:

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

CSS:

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

Metin kutusu boyutunun W3C kutu modelinin "kurbanı" olduğunu unutmayın . Kurban derken kastettiğim, bir metin kutusunun yüksekliği ve genişliğinin, dolgu yüksekliği / genişliği ve kenarlık genişliğine ek olarak yukarıda atanan yükseklik / genişlik özelliklerinin toplamı olmasıdır. Bu nedenle, metin kutularınız, farklı tarayıcılardaki varsayılan dolgulara bağlı olarak farklı tarayıcılarda biraz farklı boyutlarda olacaktır. Farklı tarayıcılar metin kutularına farklı dolgu tanımlama eğiliminde olsalar da, çoğu sıfırlama stil sayfası<input /> sıfırlama sayfalarına etiket ekleme eğiliminde değildir , bu nedenle bu akılda tutulması gereken bir şeydir.

Kendi dolgunuzu tanımlayarak bunu standartlaştırabilirsiniz. CSS'nizin belirli bir dolgusu olduğu için metin kutusu tüm tarayıcılarda aynı görünür:

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

1 piksel dolgusu ekledim çünkü bazı tarayıcılar, dolgu 0px ise metin kutusunu çok sıkışık gösterme eğiliminde. Tasarımınıza bağlı olarak, daha fazla dolgu eklemek isteyebilirsiniz, ancak dolguyu kendiniz tanımlamanız şiddetle tavsiye edilir, aksi takdirde kendi adlarına karar vermek için farklı tarayıcılara bırakacaksınız. Tarayıcılar arasında daha fazla tutarlılık için, sınırı kendiniz de tanımlamalısınız.

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

Metin kutusu kodunuz:

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

CSS kodunuz:

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

veya

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

Bu nedenle, önce nitelikleri (ilk örneğe bakın) veya sınıfları (son örneğe bakın) içeren öğenizi seçin. Daha sonra, öğenize yükseklik ve genişlik değerleri atarsınız.

Bu benim için IE 10 ve FF 23'te çalışıyor

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

Sınıf yöntemini kullanmak istemiyorsanız, metin kutusunda değişiklikler yapmak için ebeveyn-çocuk yöntemini kullanabilirsiniz.

Örneğin. Div formumda bir form oluşturdum.

HTML Kodu:

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

Şimdi CSS kodu şöyle olacak:

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

Sorun çözüldü.

Bak! Width niteliği, max-width özelliği tarafından kırpılır. Ben de kullandım ...

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

Deneyin:

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

Bu, metin kutusu için ayarlanan metin boyutundan bağımsız kalmanın bir yoludur. Bunun yerine dolgu kullanarak yüksekliği artırıyorsunuz

Bu kodu deneyin:

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

Bu şekilde, metin kutusu için ayarlanan metin boyutundan bağımsız kalır. Bunun yerine dolgu kullanarak yüksekliği artırıyorsunuz.

Öğeler, heightve widthnitelikleriyle boyutlandırılabilir .

Bağımlı girdi genişliğini kap genişliğine göre yapabilirsiniz.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}