Làm cách nào để có thể xác định kích thước của hộp văn bản đầu vào trong HTML?

90

Đây là một hộp văn bản đầu vào HTML:

<input type="text" id="text" name="text_name" />

Các tùy chọn để xác định kích thước của hộp là gì?

Làm thế nào điều này có thể được thực hiện trong CSS?

html css input

— osos
nguồn

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

— Tony

Trong một số trường hợp chỉ thiết lập max-widthlà đủ

— Christophe Roussy

128

Bạn có thể đặt nó width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

hoặc thậm chí xác định tốt hơn một lớp:

<input type="text" id="text" name="text_name" class="mytext" />

và trong một tệp CSS riêng, hãy áp dụng kiểu cần thiết:

.mytext {
    width: 300px;
}

Nếu bạn muốn giới hạn số ký tự mà người dùng có thể nhập vào hộp văn bản này, bạn có thể sử dụng maxlengththuộc tính:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— Darin Dimitrov
nguồn

10

ngoài ra: bạn có thể thay đổi chiều rộng theo "em" (chứ không phải "px") và sau đó kích thước tỷ lệ với kích thước phông chữ của hộp văn bản

— Alexander Bird

Cảm ơn bạn đã làm việc trong stackoverflow

— Dev Solution

45

Các sizethuộc tính hoạt động, cũng

<input size="25" type="text">

— Phân tích mờ
nguồn

8

Thử cái này

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Hoặc cái gì đó khác

 <input type="text" id="txtbox">

với css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— Janarthanan Ramu
nguồn

3

Câu trả lời của bạn không có gì mới và bạn nên chỉ định các đơn vị (px, pt,% v, v.v.) trong css

— Jon P

1

Chà- Kích thước phông chữ (style = "font-size: 18pt") là cái tôi đang tìm kiếm và điều đó cũng làm tăng kích thước của hộp. Mặc dù không được OP yêu cầu rõ ràng, nó cũng làm tăng thêm giá trị.

— Wolf 5

Điều này đã hiệu quả. Do đó cảm ơn rất nhiều. Tuy nhiên, văn bản dường như tự căn giữa theo chiều dọc. Tôi có thể ngăn chặn điều này bằng cách nào không?

— Aaron John Sabu

@AaronJohnSabu Xin lỗi vì sự chậm trễ .. Hãy thử tăng kích thước chiều rộng .. hy vọng bạn đã tìm thấy câu trả lời ..

— Janarthanan Ramu

3

Bạn có thể đặt chiều rộng tính bằng pixel thông qua kiểu nội tuyến:

<input type="text" name="text" style="width: 195px;">

Bạn cũng có thể đặt chiều rộng với chiều dài ký tự hiển thị:

<input type="text" name="text" size="35">

— betrice mpalanzi
nguồn

-2

<input size="45" type="text" name="name">

"Kích thước" chỉ định chiều rộng hiển thị trong các ký tự của đầu vào phần tử.

Bạn cũng có thể sử dụng chiều cao và chiều rộng từ css.

<input type="text" name="name" style="height:100px; width:300px;">

— Daniel dos Santos
nguồn