Remove increment and decrement icon from input field
Hidden in the comments in the post you linked is a suggestion to use the tel
input type:
<input type="tel" value="111">
A few suggestions regarding the number
type:
The number
input type accepts min
and max
attributes to set number constraints.
<input min="1" max="10" type="number" value="1">
Seeing as you seem to be using Ember, this would probably be more appropriate:
{{input type="number" min="1" max="10"}}
If you truly want to hide the buttons:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=number] {
-moz-appearance: textfield;
}
<input type="number" min="1" max="10" value="1">
You can still use the arrow keys to increase/decrease the value.
You can use like this way
It worked for me
<html>
<head>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
Hello <input type='number'>
</html>