Remove increment and decrement icon from input field

Question

I have a input as follows:

<input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">

Upon rendering, it automatically adds the increment and decrement buttons as shown below. And because of this, the maxLength doesn't work (eg: if input is 999 and I click increment, it allows 1000)

I tried the following answer:

https://stackoverflow.com/a/22306944

But, no use. How to get rid of these buttons?

jdlm · Accepted Answer · 2016-11-19T08:00:07.183

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.

score 5 · Answer 2 · answered Jun 06 '17 at 12:27

5

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">

answered Jun 06 '17 at 12:27

JcKanaparthi

53
1
3

score 4 · Answer 3 · answered Nov 19 '16 at 07:33

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>

score 1 · Answer 4 · answered Nov 19 '16 at 07:38

1

add -webkit-appearance: none; on style of your input

answered Nov 19 '16 at 07:38

Salar Afshar

229
1
2
13

score 0 · Answer 5 · answered Nov 19 '16 at 07:36

One solution is to simply use a text type. This won't change much if you are using validation, with AngularJS for example.

To be sure they don't insert text into that field, simply check the type before saving it to your database.

I hope this may be of some use. You can also try the input type="tel", if that helps.

score 0 · Answer 6 · edited Jun 17 '20 at 11:55

Below is the HTML code which restrict the number field with below two features.

It will accept only number as input.
Spin button on the number field will be invisible.

<html>
<head>
    <style>
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">
</div>
</body>
</html>

JcKanaparthi · Answer 7 · 2017-04-20T11:44:15.570

REMOVE INCREMENT DECREMENTED IN INPUT FIELD NUMBER BY ADDING DIRECTIVE AND CSS

DIRECTIVE to Disable Functionality

.directive('input', function () {
    return {
        restrict: 'E',
        scope: {
            type: '@'
        },
        link: function (scope, element) {
            if (scope.type == 'number') {
                element.on('focus', function () {
                    angular.element(this).on('mousewheel', function (e) {
                        e.preventDefault();
                    });
                });
                element.on('blur', function () {
                    angular.element(this).off('mousewheel');
                });
            }
        }
    }
})

> CSS to hide -moz-appearance: textfield;

Remove increment and decrement icon from input field

7 Answers7