Mặc định kích thước phần tử đầu vào

Question

Phần tử đầu vào theo mặc định là kích thước = "20" nếu điều này không được xác định nội tuyến hoặc quy tắc kiểu CSS được quy cho nó.

Làm cách nào để đặt mặc định kích thước thực tế của giá trị? Đối với các yếu tố khác:

<div style="display: inline; width: auto;"> 
    The box will only fit the width of it's content 
</div> 

chiều rộng: tự động là tất cả những gì bạn cần. Tôi không thể đặt chiều rộng được xác định vì giá trị có thể dài hơn. Ví dụ:

<input id="short" type="text" value="1000" /> 
<input id="long" type="text" value=" Areally long name is in this input field." /> 

Tôi muốn #short có kích thước 1000 (về cơ bản là kích thước = "4" + phần đệm) nhưng dài # cần đến khi cần. Những đầu vào này đang đến trong lập trình vì vậy tôi không thể chỉ đơn giản là đặt một lớp ngắn trên của một người tôi muốn ngắn và một lớp dài trên của một người tôi muốn lâu dài. Tôi thực sự sẽ thích nếu tôi có thể đặt:

input { width: auto; } 

Dù sao để làm điều này?

Answer 1

Các yếu tố đầu vào theo mặc định là size = "20"

này "kích thước mặc định" phụ thuộc vào trình duyệt, phiên bản và hệ điều hành của bạn. Không thể thực hiện việc này theo kiểu nội tuyến.

giải pháp tốt nhất là để thiết lập chiều rộng và đệm để nó thêm lên đến 100%

input { 
    width: 98%; 
    padding: 1%; 
} 

sau đó đặt nó là tuyệt đối trái và phải 0

<fieldset> 
    <input type="text" /> 
</fieldset> 

cuối cùng thêm css này

<style type="text/css"> 
    fieldset { 
     position: relative; 
    } 

    input { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
</style> 

Answer 2

Giả sử bạn có từng đầu vào trên hàng của chính nó trong biểu mẫu, bạn có thể đặt thuộc tính kích thước thành kích thước mong muốn nhưng lso thêm css:

input[type="text"] { 
    max-width: 100%; 
} 

Điều này đảm bảo trường không tràn biểu mẫu. Cách tiếp cận này đưa ra một gợi ý trực quan về số lượng dữ liệu được mong đợi cho các trường ngắn (vì chúng sẽ có kích thước phù hợp) trong khi đặt một giới hạn cho những cái dài.