在黑莓HTML的输入根据不同的类型有不同的宽度 [英] HTML inputs in Blackberry have different width depending on their type

问题描述

使用样式输入宽度：100％;箱尺寸：边界盒; 类型数量或日期有不同的宽度比类型的那些文本当我测试在黑莓以下code。我已经检查它模拟9380，9810和9850和9810设备。

Inputs with styles width: 100%; box-sizing: border-box; of type number or date have a different width than the ones of type text when I test the following code in Blackberry. I have checked it for simulators 9380, 9810 and 9850 and in 9810 device.

<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屏幕截图：

This is a screen capture from Firefox:

这是它的外观在黑莓（宽度不同的是可见的红色圆圈）：

And this is how it looks in Blackberry (the width difference is visible in the red circles):

code也可以在这里找到： http://jsfiddle.net/GXfXG/5/

Code is also available here: http://jsfiddle.net/GXfXG/5/

推荐答案

我已经解决了这个问题，增加这个CSS，感谢这个答案和这：

I have solved this issue adding this CSS, thanks to this answer and this:

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

这篇关于在黑莓HTML的输入根据不同的类型有不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！