When using the number input type in Chrome, the appearance of the input boxes is different, with the numbers appearing bottom-trimmed. Is there a way to fix this issue without adjusting the size of the input controls?
Any assistance would be greatly appreciated.
Check out the jsFiddle demonstration here
https://i.sstatic.net/P9fTq.jpg
In contrast, both text and number inputs display with the same visual appearance in Internet Explorer.
<div class="container">
<div class="small">
<input type="number" placeholder="Number" value="8" class="form-control input-xs">
<br/>
<input type="text" placeholder="Text" value="8" class="form-control input-xs">
</div>
</div>
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
.input-xs {
height: 22px;
padding: 5px 5px;
font-size: 10px;
line-height: 1.5;
border-radius: 3px;
}