Làm thế nào để thiết lập chiều rộng tương tự cho đầu vào văn bản HTML và thả xuống đầu vào

Question

Tôi có hai yếu tố HTML như vậy:

<input type="text"> 

và

<select> 
    <option>Apple</option> 
    <option>Orange</option> 
    <option>Banana</option> 
    <option>Grapes</option> 
</select> 

Tôi không phải là ở tất cả các khả năng để làm cho họ cùng chiều rộng. Không có vấn đề gì chiều rộng tôi chỉ định cho cả hai yếu tố, 100% hoặc 200px hoặc bất cứ điều gì, thả xuống luôn luôn có vẻ là khoảng 5px ngắn hơn so với hộp văn bản. Điều này xảy ra trong IE, Firefox và Chrome - trong WINDOWS.

Tôi làm cách nào để đặt chúng có cùng chiều rộng?

Giải pháp

input, select 
{ 
    -ms-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 

Answer 1

Hãy xem this working Example

Bạn có thể thay đổi CSS chỉ để giữ cho nó thích:

input, select 
{ 
    width:250px;   
} 

Answer 2

Tại sao không làm điều này?

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

select { 
    width: 205px; 
}