Làm cách nào để đặt kích thước của hộp văn bản HTML?

Làm cách nào để đặt kích thước của hộp văn bản HTML?

Chỉ dùng:

textarea {
    width: 200px;
}

hoặc là

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

Tùy thuộc vào ý bạn của 'hộp văn bản'.

Đánh dấu của bạn:

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

CSS:

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

Hãy nhớ rằng kích thước hộp văn bản là "nạn nhân" của mô hình hộp W3C . Ý tôi muốn nói với nạn nhân là chiều cao và chiều rộng của hộp văn bản là tổng của các thuộc tính chiều cao / chiều rộng được chỉ định ở trên, ngoài chiều cao / chiều rộng phần đệm và chiều rộng đường viền. Vì lý do này, các hộp văn bản của bạn sẽ có kích thước hơi khác nhau trong các trình duyệt khác nhau tùy thuộc vào phần đệm mặc định trong các trình duyệt khác nhau. Mặc dù các trình duyệt khác nhau có xu hướng xác định các vùng đệm khác nhau cho các hộp văn bản, hầu hết các biểu định kiểu đặt lại không có xu hướng bao gồm<input /> các thẻ trong các trang đặt lại của chúng, vì vậy đây là điều cần lưu ý.

Bạn có thể chuẩn hóa điều này bằng cách xác định phần đệm của riêng bạn. Đây là CSS của bạn với phần đệm được chỉ định, vì vậy hộp văn bản trông giống nhau trong tất cả các trình duyệt:

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

Tôi đã thêm phần đệm 1 pixel vì một số trình duyệt có xu hướng làm cho hộp văn bản trông quá nhồi nhét nếu phần đệm là 0px. Tùy thuộc vào thiết kế của bạn, bạn có thể muốn thêm nhiều phần đệm hơn nữa, nhưng chúng tôi khuyên bạn nên tự xác định phần đệm, nếu không, bạn sẽ để các trình duyệt khác nhau tự quyết định. Để có tính nhất quán hơn nữa trên các trình duyệt, bạn cũng nên tự xác định đường viền.

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

Mã hộp văn bản của bạn:

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

Mã CSS của bạn:

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

hoặc là

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

Vì vậy, trước tiên bạn chọn phần tử của mình bằng các thuộc tính (xem ví dụ đầu tiên) hoặc các lớp (xem ví dụ cuối cùng). Sau đó, bạn gán giá trị chiều cao và chiều rộng cho phần tử của mình.

Điều này phù hợp với tôi trong IE 10 và FF 23

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

Nếu bạn không muốn sử dụng phương thức lớp, bạn có thể sử dụng phương thức cha-con để thực hiện các thay đổi trong hộp văn bản.

Ví dụ. Tôi đã tạo một biểu mẫu trong biểu mẫu div của tôi.

Mã HTML:

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

Bây giờ mã CSS sẽ như sau:

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

Vấn đề đã được giải quyết.

Coi chưng! Thuộc tính width được cắt bớt bởi thuộc tính max-width. Vì vậy, tôi đã sử dụng ...

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

Thử:

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

Đây là cách nó vẫn độc lập với những gì kích thước văn bản đã được thiết lập cho hộp văn bản. Thay vào đó, bạn đang tăng chiều cao bằng cách sử dụng đệm

Hãy thử mã này:

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

Bằng cách này, nó vẫn độc lập với kích thước văn bản đã được đặt cho hộp văn bản. Thay vào đó, bạn đang tăng chiều cao bằng cách sử dụng đệm.

Các phần tử có thể được định kích thước bằng heightwidth thuộc tính và .

Bạn có thể đặt chiều rộng đầu vào phụ thuộc so với chiều rộng vùng chứa.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}