当我在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的屏幕截图:
这就是它在Blackberry中的外观(宽度差异在红色圆圈中可见):
此处也提供了代码:http://jsfiddle.net/GXfXG/5/
答案 0 :(得分:1)
由于this answer和this,我已经解决了添加此CSS的问题:
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}