Входы HTML в Blackberry имеют разную ширину в зависимости от их типа

Входы со стилями width: 100%; box-sizing: border-box; типа number или date имеют разную ширину, чем те, что относятся к типу text, когда я тестирую следующий код в Blackberry. Я проверил его для симуляторов 9380, 9810 и 9850 и в устройстве 9810.

<style type="text/css">
    #inputsTest { 
        border: 1px solid red; 
        margin: 15px; 
    }

    #inputsTest input { 
        border: 1px solid green; 
        width: 100%; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box; 
    }
</style>

<div id="inputsTest">
      <label for="test1">Text</label>
      <input id="test1" type="text"/>
      <label for="test2">Number</label>
      <input id="test2" type="number"/>
      <label for="test3">Date</label>
      <input id="test3" type="date"/>
</div>

Это захват экрана из Firefox: enter image description here

И вот как это выглядит в Blackberry (разница в ширине видна в красных кругах): enter image description here

Код также доступен здесь: http://jsfiddle.net/GXfXG/5/

Ответ 1

Я решил эту проблему, добавив этот CSS, благодаря этому ответу и this:

input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}