Blackberry中的HTML输入具有不同的宽度,具体取决于其类型

时间:2012-11-19 12:28:00

标签: html css html5 blackberry webkit

当我在Blackberry中测试以下代码时,类型为width: 100%; box-sizing: border-box;number的样式date的输入宽度与类型text的宽度不同。我已经检查过模拟器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 个答案:

答案 0 :(得分:1)

由于this answerthis,我已经解决了添加此CSS的问题:

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