Jak ustawić taką samą szerokość do wprowadzania tekstu HTML i upuść WEJŚCIA

Question

Mam dwa elementy HTML tak:

<input type="text"> 

i

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

nie jestem w ogóle w stanie dokonać ich ta sama szerokość. Bez względu na to, jaką szerokość określam dla OBU elementów, 100%, 200px czy cokolwiek, rozwijanie zawsze wydaje się być o 5px krótsze niż pole tekstowe. Dzieje się tak w IE, Firefox i Chrome - w WINDOWS.

Jak ustawić je tak, aby miały tę samą szerokość?

Rozwiązanie

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

Answer 1

Spójrz na this working Example

Można modyfikować CSS tylko ją zachować jak:

input, select 
{ 
    width:250px;   
} 

Answer 2

Może to zrobić?

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

select { 
    width: 205px; 
}